ajax-like-file-upload-using-hidden-iframeを達成しようとしています。もちろん、その目的で利用できるプラグインはたくさんありますが、私の要件は少し異なると思います。だから私は次のようにそれを達成しようとしています:
HTML:
<!DOCTYPE>
<html>
<style>
.file_upload{cursor:pointer;color:blue;text-decoration:underline;}
</style>
<body>
<div class="file_upload" id="upload1" name="doc1" >Upload doc1</div>
<div class="file_upload" id="upload2" name="doc2" >Upload doc2</div>
<div id="iframe_div"></div>
</body>
</html>
Jクエリ:
$(document).ready(function(){
$(".file_upload").click(function(event){
var itr = $(".file_upload").length;
var iframeName = $(this).attr('name') + itr;
var iframeId = $(this).attr('id') + itr;
$('<iframe />', {
name: iframeName,
id: iframeId,
src: 'about:blank'
}).appendTo('#iframe_div');
//append form to body of the iframe
$('<form>',{
name: iframeName + '_form',
id: iframeId + '_form',
action: 'actionName.action',
method: 'POST',
enctype: 'multipart/form-data'
}).appendTo('#' + iframeId).find('body');
//append file input
//trigger 'click' using $('#file_fld_id').trigger('click')
//browse to file and use 'onchange' to trigger
auto-submit of the form
//replace the 'file-upload' div with a progress bar...
//remove the iframe when upload is complete
});
});
要するに:
1. div をクリックしてブラウズ ウィンドウを開きます。
2. 非表示の iframe を使用してファイルをアップロードします。
しかし、私はこれを達成するには(jqueryの)知識が多すぎると思います。それとも本当にありえるの??もしそうなら、助けて/リダイレクト/何でもしてください.....どうしてこの明白な機能が回避策(フラッシュ、オベックス、シルバーライト、....)で実装されなければならないのですか。
編集(少し明確にするため):
「私のiframeは動的です」と述べたように...理由は、私のファイル入力が別のアクション(struts2)を持つ既存のフォーム内にあるはずだからです。ファイルをアップロードするためのアクションがもう 1 つあります。フォーム内にフォームを含めることはできないため、既存のフォーム内で div を使用して、他のアクションでファイルをアップロードしようとしています。また、このフォーム内で個別にアップロードするさまざまなドキュメントがあります。したがって、基本的には、各 div (ファイルのアップロードに使用されるもの) を独自のフォーム (ただし、同じアクションでアップロードを処理する) を持つ個別の iframe に置き換えようとしています。これは、閲覧中にユーザーが「開く」をクリックした瞬間に自動送信されますファイル。私は今、より明確になったことを願っています。