ajax实现一个前台的进度条,前台ajax实现上传文件并且有进度条
// 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不設(shè)置內(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)絡(luò)錯誤，請稍后重試！"
});
setTimeout(function() {
location.href = '{:url("/web/save/index")}';
},2000)
return;
}
})
總結(jié)
以上是生活随笔為你收集整理的ajax实现一个前台的进度条,前台ajax实现上传文件并且有进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python处理滑块验证码_使用pyth
- 下一篇： activiti7流程设计器_基于容器和