Question

您如何添加功能来显示通过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>

干杯;）

Answer 1

如果使用ajax执行此操作，则只能添加进度条，但IE和旧版本的FF不支持ajax文件上载。

因此，如果不支持，您将需要使用没有进度条的iframe。这就是为什么很多人为此做了很好的解决方法。 jQuery的上传器插件的一些名称列在here。

您也可以在没有插件的情况下自己完成，但是您不能使用jQuery ajax函数，因为自从jQuery 1.5.1以来它不能让您访问本机XHR对象。

将进度条添加到Jquery和PHP iFrame上传器

1 个答案: