如何使用node.js实时显示文件上传的进度答案

【问题标题】：How to display progress of the file upload using node.js in real time如何使用node.js实时显示文件上传的进度
【发布时间】：2015-07-19 16:31:41
【问题描述】：

我正在做的项目只是从目录中读取 txt/csv 文件并存储在数据库中。

上传功能就像一个魅力，但问题是我想显示进度 - 任何告诉用户系统正在处理文件的通知。

这是我的 HTML 标记

<div class="form">
    <input type="file" id="uploadFile" />
    <button id="submit" type="button">Upload</button>
</div>
<div class="terminal">
<! -------------------RESULT---------------------->
</div>

我有一个名为终端的 div 来显示文件上传的进度。我在 div 中放置文本的方式是使用 javascript 的 innerHTML 函数。因此，我的上传代码如下

var files = fs.readdirSync(folder_path);

// Loop through files gathered from folder reading

for(i=0; i<files.length; i++) {
    document.getElementbyId("terminal").innerHTML+=files[i]+"<br/>";
    var fileData = fs.readfileSync(folder_path+'\'+files[i], 'utf8');
    // Upload function below
}

以上标记是我的 js 文件的一部分，它用作上传器。我首先使用 fs.readdirSync 读取文件夹，然后遍历从 readdirSync 函数收集的文件数组。我想在每个循环中实时显示文件名。

但它只会在上传完成后显示所有内容。所以我不知道如何让它实时显示进度，换句话说，就像控制台实时显示任何信息一样。

【问题讨论】：

标签： node.js

【解决方案1】：

您不必循环，您可以轻松地将其移植到您的前端应用程序：

监控 XHR 进度 https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress

【讨论】：