前端上传文件动态控制进度条动画

效果图：

1.引用bootstrap和jquery文件

<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>

2.html页面布局

                        <div class="form-group">
                            <label class="col-sm-3 control-label"><span class="red">*</span>封面视频:</label>
                            <div class="col-sm-8">
                                <input id="video" type="file" style="display:none">
                                <button class="btn stationBut" onclick="$('input[id=video]').click();" type="button">本地上传</button>
                                <span style="line-height:30px;">(亦可直接填写URL,仅限站内资源)</span>
                                <div class="input-append">
                                    <input id="videoCover" class="form-control" type="text" style="height:30px;">
                                </div>
                                <div class="progress progress-striped active" id="loaderCenter">  //显示进度条动画
                                    <div id="loader" class="progress-bar progress-bar-success">
                                    </div>
                                </div>
                            </div>
                        </div>

3.上传文件

            $('input[id=video]').change(function () {
                mydata = document.getElementById("video").files[0];
                var formData = new FormData();
                $.ajax({
                    url: api.UploadVideo,
                    type: "post",
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    success: function (data) {
                        let content = JSON.parse(data)；
                          $('#videoCover').val(content.url);  //获取url
                            $("#loaderCenter").hide();
                    },
                    error: function () {
                        console.log("失败")
                    }
                })
            });

        })

4.监听上传进度

 // 上传进度
        var xhrOnProgress = function (fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
            //使用闭包实现监听绑
            return function () {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== 'function')
                    return xhr;
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        }

5.利用progress事件接收到响应期间持续不断触发

         $.ajax({
                    url: api.UploadVideo,
                    type: "post",
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    xhr: xhrOnProgress(function (e) {
                        $("#loaderCenter").show()
                        var percent = 100 * e.loaded / e.total; //文件上传百分比
                        $("#loader").html(parseInt(percent) + "%") //数字百分比
                        var loaderbox = document.getElementById('loader');
                        loaderbox.style.width = parseInt(percent) + "%";//进度条宽度百分比
                    }),
                    success: function (data) {
                    },
                    error: function () {
                        console.log("失败")
                    }
                })