如何在ajax文件上传中显示进度条
Posted
技术标签:
【中文标题】如何在ajax文件上传中显示进度条【英文标题】：How to show progress bar in ajax file upload 【发布时间】：2013-01-26 05:22:52 【问题描述】：我的代码发布了 ajax 请求，但没有显示进度条。请帮助更正代码以显示工作进度条。
$(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: ");
);
);
);
【问题讨论】：
【参考方案1】：@whitneyit : 我们可以使用 xhr: ajax 的函数来跟踪文件上传这样的事情
$.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();
【讨论】：
【参考方案2】：这是来自 BlueImp 的 jQuery-File-Upload：
首先下载：https://github.com/blueimp/jQuery-File-Upload/archives/master
现在，上传 js 文件夹。
制作你的 .html：
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<style>
.bar
height: 18px;
background: green;
</style>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function ()
$('#fileupload').fileupload(
dataType: 'json',
done: function (e, data)
$.each(data.result.files, function (index, file)
$('<p/>').text(file.name).appendTo(document.body);
);
);
progressall: function (e, data)
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css(
'width',
progress + '%'
);
);
</script>
</body>
</html>
我没有对此进行测试，但它应该可以正常工作。如果不是，请告诉我。
可选：在您的 .css 文件中包含 <style></style> 的内容。
可选：在 .js <script src=""></script> 标记中包含 .js。
来源：https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
【讨论】：
【参考方案3】：不幸的是，$.ajax 方法不返回任何进度信息。
此外，仅使用 HTML 和 javascript 没有跨浏览器解决方案。我建议查看Uploadify。
【讨论】：
以上是关于如何在ajax文件上传中显示进度条的主要内容，如果未能解决你的问题，请参考以下文章