上传&下载文件时添加进度条
主要是通过监听progress事件来实现该操作
上传文件部分代码：
var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
var formData = new FormData(); // FormData 对象
formData.append("file", fileObj); // 文件对象
xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
xhr.open("post", "http://example.uploadFile.cn", true); //post方式，url为服务器请求地址，true表示请求为异步
if(xhr.upload) {
//检查其属性upload是否存在
xhr.upload.addEventListener("progress", function(e){
// 图片上传的进度条设置
if(e.lengthComputable) {
console.log("已下载：" + e.loaded);
console.log("下载总量" + e.total);
console.log("下载进度：" + Math.floor(e.loaded/e.total*10000)/100 + "%");
}
}, false);
}
xhr.send(formData); //开始上传，发送form数据
下载文件和上传文件的区别在于触发的progress方法不同，上传文件触发的是xhr.onload下的progress方法，下载文件触发的是xhr上的progress方法
故下载文件部分代码如下：
xhr.addEventListener("progress", function(e){
if(e.lengthComputable) {
console.log("已下载：" + e.loaded);
console.log("下载总量" + e.total);
console.log("下载进度：" + Math.floor(e.loaded/e.total*10000)/100 + "%");
}
}
（注意：请求一定是异步的才会触发progress）
