上传&下载文件时添加进度条

主要是通过监听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）