ajax实现一个前台的进度条,前台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;

}

})