- ファイルとともにパラメーターをPOSTで送信します。
- クッキーを送信します。
- 一度に複数のファイルを選択する機能を提供します（ユーザーが望むように、ここでは数千）。
- グループでファイルを送信します。
- ファイルは、特定のメガバイト数までのグループ、またはグループ内の特定の数のファイルまで収集されます。 （これは、サーバーがPOSTリクエストのサイズと1つのパッケージ内のファイル数に制限があるという事実によるものです）
フラッシュの経験がないため、ブートローダーの作成にはJavaScriptのみが選択されました。
それで何ができたの
最初に検索が行われました。SWFupload、Uploadifyなどが調査されました。 おそらくあまり良くはありませんが、それぞれがすべての要件を満たしていませんでした。
バグ、バグ、バグ。 Flashの一部のバージョンでは、変数の名前を制御できません。 SWFuploadはCookieを送信しませんが、Cookieコレクターがあり、GETまたはPOSTメソッドを使用してのみ送信します。 ただし、Cookieに基づいてユーザーセッションをチェックするCMSがサーバー上にあるため、Flashは破棄され、HTML5を使用してソリューションが選択されました。
FileApiはFF 3.0以降、Chrome、Safari 4以降でのみサポートされているため、これらのブラウザでの作業の複雑さを分析します。
微妙な1
readAsBinaryStringを使用してChromeでファイルの内容を取得します。
この方法を使用すると、すべてのファイルが破損し、元のサイズの約1.5倍のサイズになるという不可解な問題が発生しました。 この問題を解決することはできなかったため、クロム（およびサファリ）にはFormDataを使用しました。
FFのPOSTメソッド（最大4.0）を使用してファイルのグループ+データを送信するには、multipart / form-dataを作成します。
Content-Type: multipart/form-data; boundary=------multipartformboundary1295790618
\r\n
--------multipartformboundary1295790618
\r\n
Content-Disposition: form-data; name='user_files[]';filename='My_File1.jpg'
\r\n
Content-Type: application/octet-stream
\r\n
\r\n
\r\n
--------multipartformboundary1295790618
\r\n
Content-Disposition: form-data; name='user_files[]';filename='My_File2.jpg'
\r\n
Content-Type: application/octet-stream
\r\n
\r\n
\r\n
--------multipartformboundary1295790618
\r\n
Content-Disposition: form-data; name='my_param'
\r\n
\r\n
Param_value
\r\n
--------multipartformboundary1295790618
\r\n
Content-Disposition: form-data; name='my_param'
\r\n
\r\n
Param_value
\r\n
--------multipartformboundary1295790618--
\r\n
繊細な2
FormDataサポートの定義は、次のように検証できます。
function isFormDataSupported() {
return (window.FormData);
}
微妙第3
FF 3.0 / 3.5およびFF 3.6は、異なる機能を使用してファイルのコンテンツを取得します。
FF 3.0 / 3.5：readAsBinary（）
FF 3.6：getAsBinary（）
機微No.4
XMLHttpRequestを介してファイルを送信する場合にも違いがあります。
FormDataの場合、send（）メソッドを使用して送信する必要があり、getAsBinary（）またはreadAsBinaryStringを使用して受信したファイルを送信するには、sendAsBinary（）を使用して送信する必要があります。
繊細な5
FFは、クロムやSafariとは異なり、XMLHttpRequestのprogressイベントを発生させることはほとんどありません。 実際、FFの進行イベントは、非常に高速な接続またはローカルホストでまったく機能しない場合がありました。
繊細な6番
FFのXMLHttpRequestの中止イベントもエラーイベントを発生させます。 この場合、エラーのハンドラーがある場合は特に注意する必要があります-これは、ユーザーに追加の質問を引き起こす可能性があります。
繊細な7
PHPの場合、php.iniの次の設定に注意することをお勧めします。
post_max_size-POSTの最大サイズ。
upload_max_filesize-最大ファイルサイズ。
max_file_uploads-ダウンロードされたファイルの最大数。
スクリプトを使用する場合は、サーバー設定のスクリプトを変更することを忘れないでください。
画像をダウンロードするためのデモ（拡張子によるフィルターがあります）
デモをダウンロードする
AJAXダウンロードに関する優れたプレゼンテーション
更新：
Subtlety No. 8 （このバグに気づいたsoltpainに感謝）
Windowsでは、[input type = file multiple]を使用して複数のファイルを選択する際に別のニュアンスがあります。
選択可能なファイルの数は、選択したファイルの名前の合計の長さによって異なります。 クロムの場合-256文字、FFの場合-4096（1つのファイルの長さではなく、名前の合計の長さ、つまり、名前が20文字で構成されるファイルがある場合、クロムでは最大10個のファイルを選択できます）。 Linuxでは、すべて問題ありません。
バグの説明：
codereview.chromium.org/4198004