Node.js, Express: How can I handle res.send values with the client
Question
I'm a newbie in node.js, and I'm also using express.
I build a simple web application to upload files to a server, and save them, when they are okay. 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. 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? Or do I not need to use client sided javascript?
(I would like to combine it later with HTML, so I can design the answer from the server with CSS.)
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:
<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>
2 answers
solution1
0 2016-07-15 10:24:57
What you actually need is socket programming. Using node js you can do that easily.
just see this link for more on socket and node js.
solution2
0 2016-07-15 10:32:37
you can use AJAX and check the error status. 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.