// ajax + jQuery上傳

function UploadFile() {

var xhrOnProgress = function(fun) {

xhrOnProgress.onprogress = fun; //綁定監(jiān)聽

//使用閉包實現(xiàn)監(jiān)聽綁

return function() {

//通過$.ajaxSettings.xhr();獲得XMLHttpRequest對象

var xhr = $.ajaxSettings.xhr();

//判斷監(jiān)聽函數(shù)是否為函數(shù)

if (typeof xhrOnProgress.onprogress !== 'function')

return xhr;

//如果有監(jiān)聽函數(shù)并且xhr對象支持綁定時就把監(jiān)聽函數(shù)綁定上去

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不轉(zhuǎn)換數(shù)據(jù)

contentType: false, // 告訴jquery不設置內(nèi)容格式

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: "網(wǎng)絡錯誤，請稍后重試！"

});

setTimeout(function() {

location.href = '{:url("/web/save/index")}';

},2000)

return;

}

})

總結(jié)

以上是生活随笔為你收集整理的ajax实现一个前台的进度条,前台ajax实现上传文件并且有进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。