Ajax を使用してデータとファイルを同時にアップロードするにはどうすればよいですか?

Ajax を使用したデータとファイルの同時アップロード

フォーム送信に Ajax を使用すると、シームレスなユーザー エクスペリエンスが得られますが、両方をアップロードしようとすると課題が発生しますデータとファイルを同時に処理します。この記事ではこの問題に対処し、ファイルのアップロードとデータ収集の方法を組み合わせて複数フィールドの送信を成功させる方法を示します。

問題の理解

クエリのステムjQuery と Ajax を使用してデータとファイルを送信するために採用されているさまざまな戦略から説明します。データは .serialize() を使用して収集されますが、ファイルは new FormData($(this)[0]) を使用します。これらの技術を結合することで、データとファイルの同時送信が可能になります。

解決策

解決策は、jQuery 識別子を正しく使用することにあります。最初の対応する FormData(this) の代わりに新しい FormData(this) を採用することにより、データとファイルの両方を FormData オブジェクトにカプセル化できます。このオブジェクトは、Ajax リクエストのデータ パラメーターとして機能します。

サンプル コード

次のコード スニペットは、両方のメソッドの統合を示しています。

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

    var formData = new FormData(this);

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

実装の詳細

提供されているコードでは、フォームの送信時に Ajax リクエストが開始され、FormData オブジェクトを利用してすべてのフォーム フィールドとファイルがカプセル化されます。 contentType オプションと processData オプションは、ネイティブ FormData が変更されないように無効になっています。成功コールバックは、サーバーから受信した応答を処理します。

簡略版

簡潔にするために、次のコードはソリューションの簡略版を提供します。

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

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

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