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

 

一般上传视频或者附件，这些文件都是很大的，最好能显示进度条给用户看：

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

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

 

二、上传文件，显示进度条 

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

            //监视上传进度
            if (xhr.upload) {
                xhr.upload.onprogress = function (e) {
                    if (e.lengthComputable) {
                        //percent 计算出加载的百分比
                        var percent = Math.floor((e.loaded / e.total) * 100);
                        $('#jindutiao').css("display", "block")//显示进度条
                        $('#jindutiao .bar').css("width", percent + '%');
                    }
                };
            }

            //请求完毕
            xhr.onload = function () {
                success执行的逻辑。。。。。。。
                $('#jindutiao').css("display", "none");//隐藏进度条
                $('#jindutiao .bar').css("width", '1%');//恢复最初的进度
            }

            //发送
            var data = new FormData();
            data.append("file", file);
            xhr.send(data);