データとファイルのアップロードを単一の Ajax フォームに結合するにはどうすればよいですか?

Ajax を使用した単一フォームでのデータとファイルのアップロードの結合

Web 開発では、データとファイルの両方を Ajax から同時に送信する機能。単一の形式が重要です。非同期アプローチである Ajax を使用すると、開発者はこれをシームレスに実現できます。

Ajax フォームでデータとファイルのアップロードを組み合わせる方法を理解するために、まずデータとファイルを個別に処理する従来の方法を調べてみましょう。

Serialize()

jQuery によるデータの処理.serialize() メソッドは、フォーム要素をクエリ文字列に変換し、Ajax リクエストでサーバーに送信できます。例:

$("form#data").submit(function() {

    var formData = $(this).serialize();

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        }
    });
});

FormData によるファイルの処理

ファイルのアップロードの場合、 new FormData($(this)[0]) はフォームを表す FormData オブジェクトを作成します。データとファイル。以下に例を示します。

$("form#files").submit(function() {

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false
    });
});

データとファイルの結合

データとファイルのアップロードの両方を結合するには、単に FormData オブジェクトを使用し、以下を含むすべてのフォーム要素を追加します。ファイル入力。たとえば、次のフォーム HTML を考えてみましょう:

そして、対応する jQuery および Ajax コード:

$("form#datafiles").submit(function(e) {
    e.preventDefault();

    var formData = new FormData(this);

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

このコードは、フォームからデータとファイルの両方を収集し、それらをフォームに送信します。

データとファイルの処理の背後にある原則を理解することで、両方の方法を簡単に組み合わせて堅牢な Ajax を作成できます。複雑なデータ送信をサポートするフォーム。

以上がデータとファイルのアップロードを単一の Ajax フォームに結合するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。