jQuery AJAX を使用してファイル入力を含むフォームを正常に送信するにはどうすればよいですか?

jQuery シリアル化でファイルのアップロードを処理する方法

ファイル入力フィールドを含むフォームを操作する場合、AJAX 送信用の jQuery のシリアル化関数を使用すると、課題を提起します。従来のシリアル化メソッドではファイル入力が効果的に処理されず、空の $_FILES データが生成されます。

解決策: FormData オブジェクト

この制限を克服するには、FormData オブジェクトを利用します。 FormData を使用すると、ファイル入力を含むすべてのフォーム データをキャプチャしてシリアル化できます。 FormData を利用すると、ファイルを AJAX リクエストにシームレスに渡すことができます。

コード例:

$(document).on("submit", "form", function(event) {
    event.preventDefault();
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status) {

        },
        error: function (xhr, desc, err) {

        }
    });        

});

この例では、フォームから FormData オブジェクトを作成します。そして、processData および contentType オプションを false に設定します。これらのオプションにより、jQuery によるデータの自動変換とコンテンツ タイプの設定が防止され、FormData がファイル アップロード プロセスを処理できるようになります。

以上がjQuery AJAX を使用してファイル入力を含むフォームを正常に送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。