Ajax を使用した単一フォームでのデータとファイルのアップロードの結合
Web 開発では、データとファイルの両方を Ajax から同時に送信する機能。単一の形式が重要です。非同期アプローチである Ajax を使用すると、開発者はこれをシームレスに実現できます。
Ajax フォームでデータとファイルのアップロードを組み合わせる方法を理解するために、まずデータとファイルを個別に処理する従来の方法を調べてみましょう。
Serialize()
jQuery によるデータの処理.serialize() メソッドは、フォーム要素をクエリ文字列に変換し、Ajax リクエストでサーバーに送信できます。例:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
FormData によるファイルの処理
ファイルのアップロードの場合、 new FormData($(this)[0]) はフォームを表す FormData オブジェクトを作成します。データとファイル。以下に例を示します。
1 2 3 4 5 6 7 8 9 10 11 12 |
|
データとファイルの結合
データとファイルのアップロードの両方を結合するには、単に FormData オブジェクトを使用し、以下を含むすべてのフォーム要素を追加します。ファイル入力。たとえば、次のフォーム HTML を考えてみましょう:
1 |
|
そして、対応する jQuery および Ajax コード:
1 2 3 4 5 6 7 8 9 |
|
このコードは、フォームからデータとファイルの両方を収集し、それらをフォームに送信します。
データとファイルの処理の背後にある原則を理解することで、両方の方法を簡単に組み合わせて堅牢な Ajax を作成できます。複雑なデータ送信をサポートするフォーム。
以上がデータとファイルのアップロードを単一の Ajax フォームに結合するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。