JQueryとPHP iFrame Uploaderにプログレスバーを追加

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でそれを行うが、AjaxのファイルのアップロードはIEと古いFFのバージョンでサポートされていない場合にのみ、プログレスバーを追加することができます。

サポートされていない場合は、プログレスバーなしでiframeを使用する必要があります。だからこそ、多くの人が素晴らしい回避策を講じてきました。 jQuery用のアップローダプラグインのいくつかの名前は、hereと記載されています。

jQuery ajax関数を使用することはできませんが、プラグインなしで自分で行うことはできますが、jQuery 1.5.1以降ではネイ​​ティブXHRオブジェクトにアクセスすることはできません。