Node.js,Express:如何处理客户端的res.send值

时间:2016-07-15 10:08:21

标签: javascript html node.js express

我是node.js的新手,我也使用快递。

我构建了一个简单的Web应用程序来将文件上传到服务器,并在它们正常时保存它们。这工作正常,但现在我想通知客户当前状态(是上传还是不起作用,因为文件的大小)。

我知道我应该使用res.send(),但我想将它显示在同一页面上(所有元素都在“upload.html”上),客户端上传了该文件。我想,我必须使用客户端的javascript来处理发送的信息,但我如何与服务器端的JavaScript和客户端javascript进行通信?或者我不需要使用客户端javascript?

(我想稍后将其与HTML结合使用,因此我可以使用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 个答案:

答案 0 :(得分:0)

实际需要的是套接字编程。使用节点js可以轻松完成。

请参阅this link了解有关套接字和节点js的更多信息。

答案 1 :(得分:0)

您可以使用AJAX并检查错误状态。有

...
<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>