如何在ajax文件上传中显示进度条 [英] How to show progress bar in ajax file upload
本文介绍了如何在ajax文件上传中显示进度条的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的代码发布ajax请求,但它没有显示进度条。请帮助更正代码以显示工作进度条。
My code post ajax request but it is not showing a progress bar. Please help to correct the code to show a working progress bar.
$(document).ready(function () {
$("#uploadbutton").click(function () {
var filename = $("#file_path$i").val(); //get form data;
$.ajax({
type: "html",
url: "share.php",//onwhich post ajax data;
enctype: 'multipart/form-data',
data: {
file: filename
},
success: function () {
alert("Data Uploaded: ");
}
});
});
});
推荐答案
@whitneyit:我们可以使用xah:function of ajax跟踪文件上传类似这样
@whitneyit : we can use xhr: function of ajax to track the file upload something like this
$.ajax({
url: 'handler/FileUploader.ashx?FileName=' + file.name, //server script to process data
type: 'POST',
xhr: function () {
myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
}
return myXhr;
},
success: function (result) {
//On success if you want to perform some tasks.
},
data: file,
cache: false,
contentType: false,
processData: false
});
function progressHandlingFunction(e) {
if (e.lengthComputable) {
var s = parseInt((e.loaded / e.total) * 100);
$("#progress" + currFile).text(s + "%");
$("#progbarWidth" + currFile).width(s + "%");
if (s == 100) {
triggerNextFileUpload();
}
}
}
这篇关于如何在ajax文件上传中显示进度条的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文