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

时间:2015-07-19 08:05:29

标签: node.js

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

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

这是我的HTML标记

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

我有一个名为terminal的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函数收集的文件数组。我想实时显示每个循环中的文件名。

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

1 个答案:

答案 0 :(得分:0)

您无需循环,您可以轻松将其移植到您的前端应用程序:

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