Node.js + Ajax 实现的带进度反馈的上传功能
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
views
.gitignore
README.md
app.js
demo.gif
package.json

README.md

Uploader

Node.js + Ajax 实现的带进度反馈的上传功能

image

你可以利用以下命令将项目复制到本地并且运行查看效果

git clone https://github.com/hwaphon/Uploader.git && cd Uploader
npm install && node app.js

实现上传进度更新的核心代码如下:

	xhr.upload.onprogress = function(event) {
		if (event.lengthComputable) {
			var result = Math.round(event.loaded / event.total * 100);

			if (result >= 100) {
				progressText.innerHTML = "Completed!";
			} else {			
				progressText.innerHTML = result + '%';
			}

			progressBar.style.width = result + '%';
		}
	};

这里使用了 xhr.upload,作用是返回一个 XMLHttpRequestUpload 对象,然后我们就可以监听进度事件,利用 loadedtotal 分别获取已上传的大小和总文件大小,取二者的比值即可更新进度条。

参考资料:

FormData 资料

XMLHttpRequest 资料

formidable 官方介绍