ファイル入力要素をjQueryでスワップ

Question

私はユーザーが画像をアップロードできるWebサイトを構築しています。 SWFUploadやUploadifyのようなFlashプラグインを使いたくないのですが、一度に複数の画像をアップロードできるようにしたいと思います。これは、multiple=""属性セットを持つファイル入力を使用するようになります。問題は、ユーザーがコンピュータ上の同じディレクトリから複数の画像しか選択できないことです。

これに対処するために、私はJavascriptを含むアイディアを持っていました。私はmultiple属性を持つページにファイルを入力しています。ユーザーがそのファイル入力でいくつかのファイルを選択すると、それをCSSで非表示にします。その後、Javascriptを使用して新しいファイル入力をその場所に配置します。ユーザーはこれを使用して別のディレクトリからさらに多くのファイルをアップロードできます。こうすることで、アップロードしたいすべての画像をユーザが持っていれば、PHPをバックエンドとして扱うことができる複数のファイル入力があるフォームがあります。

これは私の関連するマークアップです：私は、アップロードするためにいくつかの画像を選択した場合、jQueryのは正しく隠し、現時点では

$('#select_images input:first').change(function(){ 
    // User selected some images to upload, hide this file input 
    $(this).css('right', '-10000px'); 

    // Place a new file input to take its place 
    $(this).before('<input type="file" name="files[]" multiple="multiple" />'); 
}); 

：

<div id="select_images"> 
    <input type="file" name="files[]" multiple="multiple" /> 
</div> 

そして、私のJavascript（jQueryライブラリを使用して）現在のファイル入力を置き換え、古いものを新しい場所に置きます。マークアップはこれで今：

<div id="select_images"> 
    <input type="file" multiple="multiple" name="files[]"> 
    <input type="file" multiple="multiple" name="files[]" style="right: -10000px;"> 
</div> 

ここに問題があります。 jQueryで配置された新しいファイル入力を使用してアップロードするファイルをさらに選択すると、何も起こりません。 Firebugは入力に関するファイルデータを表示していないので、jQueryを使用して挿入された新しいファイル入力はファイルを受け入れていないようです。 Javascriptを使用してDOMに挿入された入力ファイルにファイルを置くのを止めてしまう何らかのセキュリティがありますか？

ありがとうございます！

Answer 1

この方法は問題なく動作しますが、新しいファイル入力を作成するたびに、実際にそのフィールドをすぐに提出することができます。ページに非表示のiFrameを作成すると、フォームはiFrameをターゲットとして使用して、アップロードプロセスをすぐに開始できます。

一方、内部に新しいファイルフィールドを持つ新しいフォーム要素を作成することができます。リンスとリピート！

特定の問題については、セキュリティ上の制限はありません。 Firebugから問題を厳しく取り上げているのですか、またはフォームをサーバーにPOSTしようとしましたか？ファイル入力の値を調べるjavascriptの機能に関するセキュリティ制限があり、これがFirebugに影響する可能性があります。