在搞定详情页设计、新媒体设计等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的使用。