js 使用arraybuffer解决文件上传进度

在搞定详情页设计、新媒体设计等web网页中，上传文件是常见功能。为给用户更好的体验，上传文件等待时给出进度是一个很好的解决方案。进度显示对于大文件上传，网速慢时特别需要。

实现代码：

var request = new XMLHttpRequest();

request.addEventListener(‘readystatechange’, function(e) {
if(request.readyState == 2 && request.status == 200) {
// Download is being started
}
else if(request.readyState == 3) {
// Download is under progress
}
else if(request.readyState == 4) {
// Downloading has finished
}
});

request.addEventListener(‘progress’, function(e) {
var percent_complete = (e.loaded / e.total)*100;
console.log(percent_complete);
});

request.responseType = ‘arraybuffer’;

request.open(‘get’, ‘xxxx.woff’);

request.send();

此类问题关键是arraybuffer的使用。

案例应用