私は、カスタム UI で、エンド ユーザーが複数のファイルをサーバーにアップロードできるようにする UI を実装しようとしています。これは、GMail や Outlook.net とほぼ同じ方法です。
ノードにいくつかのもの：
- これ
<input type="file">は醜く、標準的ではありません (IE では、ファイル名の左側に「参照」という名前のボタンが表示されます。Chrome では、ファイル名の右側に「選択」という名前のボタンが表示されます)。 - UI を行う方法のほとんどの提案は、入力ファイル要素をで非表示にすることを提案していますが
opacity=0、その上にカスタム UI を使用しています。「クリック」イベントによってダイアログ ボックスが開き、戻ったときにファイル名 (パスなし) が $('#file').val() として利用可能になります。この質問とjsfiddleのサンプルを参照してください。 - また、HTML5 には
multiple="multiple"属性があり、ユーザーが複数のファイルを選択できるようになっていることも認識しています。 - ただし、IE8以降（およびWebKit、Mozila）で動作する複数ファイルソリューションを探しています。
- 一部の人々は、Google が Flash を使用していると示唆しました。本当じゃない。フラッシュが無効になっている場合、マルチファイルのアップロードは機能しています。
さて、これが私の最大の驚きです: IE と Chrome の両方で開発者ツール (F12) を使用し、GMail と Outlook.NET の両方を調べます -どちらの実装も(私が知る限り)ツリーに要素がありません。<input type='file'>さらに、どちらの実装も IE8 (フラッシュ無効) で動作しています。
何が起こっている？どうやってやっているの？
編集:なぜ彼らはファイル入力要素を使用しないと思いますか? 開発者ツール (F12) を開き、コンソールに切り替えて、次のように入力しますdocument.getElementsByTagName('input')。24 個の入力要素があり、そのうち 19 個が type=hidden で、type=file はありません。
編集 2:すべてのレスポンダーとコメンテーターに感謝します。確かに-以下の「他に方法はない」という議論（コメント内）は有効でした。結局のところ、Outlook.NET と GMail の両方に<input type='file'>要素があり、ユーザーが [ファイルを添付] ボタンをクリックした場合にのみ動的に追加されます。次に、「クリック」イベントを要素に送信し、ファイル選択ダイアログをトリガーします。
これを目撃し、F12 開発ツール (Chrome または IE) を使用し、インタラクティブ コンソール タイプ: document.querySelectorAll('input[type=file]') を使用します。どちらの実装でも、要素は body の直接の子であることに注意してください (display=none を使用)。
彼らはアップロードに iframe を使用しませんが (以下の唯一の回答とは異なり)、アップロードするための単純な XHR コードが HTML5 で利用可能になりました。
その方法に関する Web 上の最適なリソースは、https ://developer.mozilla.org/en-US/docs/Using_files_from_web_applicationsです。以下の@Jayの手順を実行しましたが（これは素晴らしい）、Mozillaページの方が簡単で、これが私の推奨事項です. また、@Niranjan コメントの jsfiddle サンプルを簡単に見てください。