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

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

jQuery と Ajax を使用してフォームを操作する場合は、どちらかを送信するのが一般的ですデータまたはファイルですが、両方を同時に行うことはできません。これは、両方のタイプのコンテンツをアップロードする必要がある場合に課題となる可能性があります。

問題の説明

主な問題は、送信前にデータとファイルが収集される方法が異なることにあります。 。通常、データは .serialize() メソッドを使用してシリアル化され、ファイルは FormData オブジェクトを使用して処理されます。

解決策

データとファイルの両方を 1 つのフォームでアップロードするには、 Ajax では、FormData の機能を活用できます。このオブジェクトを使用すると、両方のタイプのコンテンツを簡単に組み合わせることができます。その方法は次のとおりです:

<form>

$("form#datafiles").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this); // Gather both data and files into a single FormData object

    $.ajax({
        url: window.location.pathname, // Your PHP endpoint URL
        type: 'POST',
        data: formData,
        success: function(data) {
            alert(data); // Output the response from your PHP script
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

PHP スクリプト

サーバー側では、PHP スクリプトは、ユーザーが送信したデータとファイルの両方にアクセスできます。形状。 $_POST と $_FILES を使用して、この情報を取得できます。

<?php
// Display contents of $_POST
print_r($_POST);

// Display contents of $_FILES
print_r($_FILES);
?>

結論

FormData を利用すると、単一のファイルからデータとファイルの両方を簡単に送信できます。 Ajaxを使用したフォーム。このアプローチにより、フォームが合理化され、ファイルとデータの管理効率が向上します。

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