JS文件上传加进度条

html

  <form id="video_form" enctype="multipart/form-data" >
         <input class="files" type="file" name="upfile" id="upfile" onchange="uploadvideo('upfile',this)" accept=".avi,.mp4,.wmv,.rmvb,.flv,.rm">
    </form>

JS

<script type="text/javascript">
     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;
            }
        }
        //上传本地视频
        function uploadvideo(name, elem) {
            var file = elem.files;
            if (file.length == 0) return false;
            if (file[0].size > 30 * 1024 * 1024) {
                return false;
            }
            $("#video_form").ajaxSubmit({
                url: 'url',
                dataType: "text",
                cache: false,  //上传文件无需缓存
                processData: false, //用于对data参数进行序列化处理 这里必须false
                contentType: false, //必须
                timeout: 120000, //超时时间设置，单位毫秒
                type: 'POST',
                data: $("#video_form").serialize(),
                beforeSend: function (data) {
                },
                xhr: xhrOnProgress(function (e) {
                    var percent = e.loaded / e.total; //文件上传百分比
                    percent = parseInt(percent * 100);
                    console(percent)
                }),
                success: function (obj) {
                    var result = $.parseJSON(obj);
                    //成功处理                   
                },
                complete: function (XMLHttpRequest, status) { //请求完成后最终执行参数
                    if (status == 'timeout') {             //超时,status还有success,error等值的情况
                        //超时处理
                    }
                }
            });
        }
</script>