前台ajax实现上传文件并且有进度条

     // ajax + jQuery上传
        function UploadFile() {
            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;
                }
            }
            //获取文件
            var file = $("#doc-form-file")[0].files[0];
            var whether = $("#whether").val();
            var form = new FormData();
            form.append('file', file);
            form.append('whether', whether);
            //            form.append("csrfmiddlewaretoken", '{{ csrf_token }}');
            $.ajax({
                type: 'POST',
                url: '{:url("/web/save/upload")}',
                data: form,
                dataType: 'json',
                processData: false, // 告诉jquery不转换数据
                contentType: false, // 告诉jquery不设置内容格式
                xhr: xhrOnProgress(function(e) {
                    var percent = e.loaded / e.total;
                    $("#progress").css("width", (percent * 100) + '%');
                    $('#progress').html(Math.round((percent * 100)) + '%');
                    if( percent == 1){
                        setTimeout(function() {
                            $("#show-progress").modal('close');
                        }, 1000);
                    }
                }),
                success: function(data) {
                    var json = JSON.parse(data);
                    switch (json['code']) {
                        case 200:
                            $.DialogByZ.Autofade({
                                Content: json['msg']
                            });
                            setTimeout(function() {
                                location.href = '{:url("/web/save/tables")}';
                            }, 2000);
                            break;
                        case 300:
                            $.DialogByZ.Autofade({
                                Content: json['msg']
                            });
                            setTimeout(function() {
                                location.href = '{:url("/web/save/index")}';
                            }, 2000);
                            break;
                        case 301:
                            $.DialogByZ.Autofade({
                                Content: json['msg']
                            });
                            setTimeout(function() {
                                location.href = '{:url("/web/save/index")}';
                            }, 2000);
                            break;
                        case 302:
                            $.DialogByZ.Autofade({
                                Content: json['msg']
                            });
                            setTimeout(function() {
                                location.href = '{:url("/web/save/index")}';
                            }, 2000);
                            break;
                        case 304:
                            $.DialogByZ.Autofade({
                                Content: json['msg']
                            });
                            setTimeout(function() {
                                location.href = '{:url("/web/save/index")}';
                            }, 2000);
                            break;
                        case 305:
                            $.DialogByZ.Autofade({
                                Content: json['msg']
                            });
                            setTimeout(function() {
                                location.href = '{:url("/web/goods/goodslist")}';
                            }, 2000);
                            break;
                        case 306:
                            $.DialogByZ.Autofade({
                                Content: json['msg']
                            });
                            setTimeout(function() {
                                location.href = '{:url("/web/save/index")}';
                            }, 2000);
                            break;
                    }
                    //                    console.log(arg);

                },
                error: function() {
                    $.DialogByZ.Autofade({
                        Content: "网络错误，请稍后重试！"
                    });
                    setTimeout(function() {
                        location.href = '{:url("/web/save/index")}';
                    },2000)
                    return;
                }
            })