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

Ajax を使用した 1 つのフォームでのデータとファイルの両方のアップロード

1 つの Ajax フォームでのデータとファイルの両方のアップロードは、Web アプリケーションの一般的な要件です。このタスクを効果的に達成する方法については、ここで詳しく説明します。

問題

Ajax を使用してデータとファイルの両方を送信しようとすると、方法が異なるため、難しい場合があります。 jQueryによって処理されます。 $.serialize() はデータを配列に収集しますが、フォーム ファイルでは new FormData() を使用する必要があります。

メソッドの結合

これらのメソッドを結合するための鍵FormData オブジェクトを使用しています。 FormData は、フォーム データ オブジェクトを作成できるようにする組み込みコンストラクターです。このオブジェクトはデータとファイルの両方を保持できるため、今回の目的に最適です。

例

2 つのメソッドを組み合わせるには、次のコードを使用します。

$("form#datafiles").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
    });
});

この場合、#datafiles フォームには通常のデータ入力とファイル入力の両方が含まれています。新しい FormData(this) 行は、フォームのデータを使用して新しい FormData オブジェクトを作成します。

PHP Script

サーバー側でアップロードされたデータとファイルを処理するには、次のような PHP スクリプトを使用します:

<?php

print_r($_POST);
print_r($_FILES);

?>

このコードを使用すると、フォーム データとアップロードされたファイルの両方にアクセスできます。 $_POST および $_FILES スーパーグローバル。

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