您将如何添加功能以显示通过jQuery和PHP上传的文件的进度？
我目前有以下代码。理想情况下，我想显示一个图像进度条，使用 CSS 增加大小，上传完成。
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#formsubmit").click(function () {
var iframe = $('<iframe name="postiframe" scr="http://www.google.co.uk" id="postiframe" style="display: none" />');
$("body").append(iframe);
var form = $('#theuploadform');
form.attr("action", "ddd.php");
form.attr("method", "post");
form.attr("enctype", "multipart/form-data");
form.attr("encoding", "multipart/form-data");
form.attr("target", "postiframe");
form.attr("file", $('#userfile').val());
form.submit();
$("#postiframe").load(function () {
iframeContents = $("#postiframe")[0].contentWindow.document.body.innerHTML;
$("#textarea").html(iframeContents);
});
return false;
});
});
</script>
<form id="theuploadform" method="post" enctype="multipart/form-data">
<input type="hidden" name="<?php echo ini_get("session.upload_progress.name"); ?>" value="123" />
<input id="userfile" name="userfile[]" size="50" type="file" multiple />
<input id="formsubmit" type="submit" value="Send File" />
</form>
<div id="textarea"></div>
干杯;)
只有在使用 ajax
执行此操作时才能添加进度条，但 IE 和旧 FF 版本不支持 ajax 文件上传。
因此，如果不支持，则需要使用不带进度条的 iframe。这就是为什么许多人为此做了很好的解决方法。这里列出了jQuery的上传器插件的一些名称。
你也可以在没有插件的情况下自己完成，但你不能使用 jQuery ajax 函数，因为从 jQuery 1.5.1 开始，它没有能力访问本机 XHR 对象。