jQuery は FormData を使用してファイルのアップロードを実装します

はじめに

より良いユーザーエクスペリエンスを得るために、非同期アップロード用のjQueryを導入しました。 JavaScript での非同期操作はフォームよりも柔軟である一方で、非同期アップロードでは、大きなファイルをアップロードするときにページが長期間フリーズすることも回避されます。

HTML

type=file の d5fd7aea971a85678ba271703566ebfd を使用すると、ユーザーはファイルを参照して選択できます。通常、入力コントロールは次のような単純なフォームに配置されます:

<form>
 <input type="file" id="avatar" name="avatar">
 <button type="button">保存</button>
</form>

しかし、なぜ 1 つのファイルしか選択できないのでしょうか? ?複数の属性を d5fd7aea971a85678ba271703566ebfd に追加して、複数の選択を有効にします。

<input type="file" id="avatar" name="avatar" multiple>

ファイルリストを取得します

上記の d5fd7aea971a85678ba271703566ebfd には、選択されたファイル リスト (配列) が含まれる、files という DOM 属性があります。

$('button').click(function(){
 var $input = $('#avatar');
 // 相当于： $input[0].files, $input.get(0).files
 var files = $input.prop('files');
 console.log(files);
});

この配列内の各項目は File オブジェクトであり、次の主な属性があります:

name: ファイル名、読み取り専用文字列、パス情報は含まれません。

size : ファイル サイズ。 、単位はバイト、読み取り専用の 64 ビット整数です

タイプ: MIME タイプ、読み取り専用の文字列、タイプが不明な場合は空の文字列が返されます

詳細については、https: //developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications

multipart/form-data

ファイルのアップロードは特殊ですが、HTTP はテキストベースの通信プロトコルを提供します。 この場合、マルチパート/フォームデータでエンコードされた HTTP フォームが必要です。

HTTP メッセージ本文の形式は次のとおりです。

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="title"
 
harttle
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="avatar"; filename="harttle.png"
Content-Type: image/png
 
 ... content of harttle.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

各フィールドは境界文字列で区切られているため、ブラウザは境界文字列がコンテンツを複製しないようにするため、multipart/form-data はバイナリを正常にエンコードできます。データ 。

jQuery アップロード ファイル

これは XMLHttpRequest レベル 2 によって提供される FormData オブジェクトで、バイナリ ファイルのマルチパート/フォーム データ エンコーディングの実行に役立ちます。フロントエンドで作業し、残りの 3 つのパラメータを導入します。

cache

cache は、ブラウザが URL (および対応する HTTP メソッド) をキャッシュしないように false に設定されます。 jQuery は、URL に冗長パラメータを追加することでこれを行います。

このメソッドは GET と HEAD でのみ機能しますが、IE8 は POST リクエストに応答するために以前の GET 結果をキャッシュします。 ここでキャッシュ: false を設定するのは、IE8 との互換性のためです。

参考: http://api.jquery.com/jquery.ajax/

contentType

jQuery の content-type のデフォルト値は application/x-www-form-urlencoded であるため、オブジェクトはdata パラメータはデフォルトでクエリ文字列に変換されます (HTTP フォーム エンコーディング enctype を参照)。

この変換を行うのに jQuery は必要ありません。そうしないと、multipart/form-data のエンコード形式が破壊されてしまいます。 したがって、contentType: false を設定して、jQuery の変換操作を無効にします。

processData

jQuery は、HTTP リクエストを送信するためにデータ オブジェクトを文字列に変換します。デフォルトでは、application/x-www-form-urlencoded エンコーディングが変換に使用されます。 contentType: false を設定すると変換が失敗するため、processData: false を設定して変換プロセスを無効にします。

提供するデータはFormDataでエンコードされたデータであり、文字列変換にjQueryを必要としません。

互換性とその他のオプション

この記事で紹介されている jQuery ファイルのアップロード方法は、FormData オブジェクトに依存しており、これは XMLHttpRequest レベル 2 インターフェイスであり、IE 10 以降、Firefox 4.0 以降、Chrome 7 以降、Safari 5 以降、Opera が必要です。 12+

これは、低バージョンのブラウザではファイル フォームを直接送信することしかできませんが、低バージョンでこの問題を解決したい場合、大きなファイル フォームを送信するページは長時間応答しなくなることを意味します。ブラウザの場合、これを実現するには、複数のファイルとアップロードの進行状況をサポートする多くの Flash プラグインなどの他の方法を使用するしかありません。