[英]Node.js, Express: How can I handle res.send values with the client
I'm a newbie in node.js, and I'm also using express. 我是node.js的新手,并且我也在使用express。
I build a simple web application to upload files to a server, and save them, when they are okay. 我建立了一个简单的Web应用程序,可以将文件上传到服务器上,并保存它们。 That works fine, but now I want to inform the client about the current state( is it uploaded or did it not work, because of the large size from the file). 效果很好,但现在我想通知客户端当前状态(由于文件很大,它是否已上传或不起作用)。
I know that I should use res.send()
, but I want to display it on the same page( with all elements on "upload.html"), where the client uploaded the file. 我知道我应该使用res.send()
,但是我想将其显示在客户端上传文件的同一页面上(所有元素都在“ upload.html”上)。 I guess, I have to using client sided javascript to work with the sended information, but how do I communicate with server side javascript and client side javascript? 我猜想,我必须使用客户端javascript处理发送的信息,但是如何与服务器端javascript和客户端javascript通信? Or do I not need to use client sided javascript? 还是我不需要使用客户端javascript?
(I would like to combine it later with HTML, so I can design the answer from the server with CSS.) (我想稍后将其与HTML结合使用,因此我可以使用CSS从服务器设计答案。)
server.js: server.js:
var express = require('express'), fileUpload = require('express-fileupload'), fs = require('fs'), obSizeOf = require('object-sizeof'), app = express(); app.use(express.static("public")); app.use(fileUpload()); app.get("/upload.html", function(req, res){ res.sendfile(__dirname + "/" +"upload.html"); }) app.post('/upload.html', function(req, res) { if(obSizeOf(req.files.sampleFile) > 10000000) { res.send("The size of the not-uploaded file is to large! Please use a file with a maximal size of 10MB"); return; } else { var sampleFile; if (req.files.sampleFile.name == "") { res.send('No files were uploaded.'); return; } else { sampleFile = req.files.sampleFile; var typ = sampleFile.mimetype.split("/"); console.log(typ[0]); if(fs.existsSync("public/upload/image/"+typ[0]+"/"+sampleFile.name)) { res.send("A File with the same name already exists! Please rename it!"); return; } else { sampleFile.mv('public/upload/'+typ[0]+'/'+sampleFile.name , function(err) { if (err){ res.send('File NOT UPLOADED!'); } else { console.log("Mieeep!"); res.send(typ[0].charAt(0).toUpperCase()+typ[0].slice(1) +' data uploaded!'); } }); } } } }); app.listen("8000");
/upload.html: /upload.html:
<html> <body> <form ref='uploadForm' id='uploadForm' action='/upload.html' method='post' encType="multipart/form-data"> Upload File </br> <input type="file" name="sampleFile" /> </br> <input type='submit' value='Upload!' /> </br> <p id="serverInformation"></p> <!--Placeholder for information from the server--> Only images </form> </body> </html>
you can use AJAX and check the error status. 您可以使用AJAX并检查错误状态。 there 那里
... ... <script> $(document).ready(function() { $("#uploadForm").submit(function() { $.ajax({ type: "POST", url: "/upload.html", data: $(this).serialize(), complete: function(xhr, statusText){ alert(xhr.status+" : "+ statusText); } }) }) }) </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.