js使用XMLHttpRequest 上传文件，显示进度条

一、 首先需要一个进度条，我这里使用的bootstrap的进度条

//进度条默认需要隐藏起来
<div id="jindutiao" class="progress progress-striped active" style="display:none;">
    <div class="bar" style="width: 1%;"></div>  //宽度就是当前的进度，100%为加载完毕
</div>

　　

二、进行异步请求上传文件，并监视进度

　　　　　　　     //创建XMLHttpRequest对象，
 　　 　　　　var xhr = new XMLHttpRequest(); 
            xhr.open("POST", "/Video/UploadVideo");

　　　　　　　     //请求成功，把进度条隐藏
            xhr.onload = function () {
　　　　　　　　　  。。。。。。。请求成功后执行的代码                

                $('#jindutiao').css("display", "none");  //隐藏进度条，并把进度重新变为1
                $('#jindutiao .bar').css("width", '1%');
            }

　　　　　　　　    //监视进度
            if (xhr.upload) {
                xhr.upload.onprogress = function (e) {
                    // 进度条
                    if (e.lengthComputable) { //正在上传中
                        var percent = Math.floor((e.loaded / e.total) * 100);
                        $('#jindutiao').css("display", "block") //进度条显示出来
                        $('#jindutiao .bar').css("width", percent + '%');
                    }
                };
            }

　　　　　　　　 //带参，提交
            var data = new FormData();
            data.append("file", file);
            xhr.send(data);