如何在我的html中显示文件上传的进度条

时间:2016-08-23 13:59:22

标签: node.js file-upload progress-bar

我在节点js中上传了文件。我想显示一行显示上传开始/上传失败/上传完成和图形进度条。

我该如何实现?

Node.js:

var express = require('express');
var router = express.Router();
var multer = require('multer');

var storage =   multer.diskStorage({
       destination: function (req, file, cb) {
         cb(null, './upload');
       },
       filename: function (req, file, cb) {
         cb(null, file.originalname + '-' + Date.now());
       }
    });

var upload = multer({ storage : storage}).array('file', 3);

router.get('/', function(req, res){
    res.send( {success: 'File uploaded!'});
})

router.post('/upload', function(req,res){
    upload(req,res,function(err) {
        console.log('Selected Files: ', req.files);
        if(err){
            res.end("Error: '" , err , "'");
        }else{
        console.log('Files uploaded!');
        res.sendStatus(204);
        }
    });
});

module.exports = router;

HTML

<form enctype   =  "multipart/form-data"
      action    =  "/upload"
      method    =  "POST"
>
<input type="file" name="file"/>
<p></p>
<input type="file" name="file"/>
<p></p>
<input type="submit" value="Upload File" name="submit">
</form>
<p id="success">{{success}}</p>

1 个答案:

答案 0 :(得分:0)

在客户端使用 XMLHttpRequest 和 .addEventListener("progress") 提交表单