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

【问题标题】：How can I show a progress bar of the file upload in my html如何在我的 html 中显示文件上传的进度条
【发布时间】：2016-08-23 13:59:21
【问题描述】：

我在节点 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>

【问题讨论】：

什么有效，什么无效？由于您放置了代码，我们假设您已尝试自己实现此功能。你在哪里卡住了？
我想在段落成功中添加状态注释，显示上传开始/上传失败/上传完成等内容。有了进度条，我不知道如何开始。

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

【解决方案1】：

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

【讨论】：