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

Question

jQuery と Ajax を使用してデータとファイルを送信していますが、データとファイルの両方を 1 つのフォームで送信する方法がわかりません。

現在、両方のメソッドをほぼ同じ方法で使用していますが、データを配列に収集する方法が異なり、データは .serialize(); を使用し、ファイルは を使用します。 ;= 新しい FormData($(this)[0]);

これら 2 つの方法を組み合わせて、Ajax 経由で 1 つの形式でファイルとデータをアップロードすることは可能ですか?

データ jQuery、Ajax、html

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

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

    $.ajax({
        URL: window.location.pathname,
        タイプ: 'POST'、
        データ: フォームデータ、
        非同期: false、
        成功: 関数 (データ) {
            アラート(データ)
        }、
        キャッシュ: false、
        contentType: false、
        プロセスデータ: false
    });

    false を返します。
});

<フォーム id="データ" メソッド="投稿">
    <input type="text" name="first" value="ボブ" />
    <input type="text" name="middle" value="ジェームズ" />
    <input type="text" name="last" value="スミス" />
    <ボタン>送信</ボタン>
</form>

ドキュメント jQuery、Ajax、html

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

    var formData = 新しい FormData($(this)[0]);

    $.ajax({
        URL: window.location.pathname,
        タイプ: 'POST'、
        データ: フォームデータ、
        非同期: false、
        成功: 関数 (データ) {
            アラート(データ)
        }、
        キャッシュ: false、
        contentType: false、
        プロセスデータ: false
    });

    false を返します。
});

<form id="files" method="post" enctype="multipart/form-data">
    <input name="image" type="file" />
    <ボタン>送信</ボタン>
</form>

Ajax 経由でデータとファイルを 1 つの形式で送信するには、上記をどのように組み合わせればよいですか?

私の目標は、これらすべてのフォームを Ajax 経由でまとめて送信できるようにすることですが、これは可能ですか?

<form id="datafiles" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="ボブ" />
    <input type="text" name="middle" value="ジェームズ" />
    <input type="text" name="last" value="スミス" />
    <input name="image" type="file" />
    <button>提交</button>
</form>

Answer 1

別のオプションは、iframe を使用し、フォームのターゲットを iframe に設定することです。

これを試すことができます (jQuery を使用します):

リーリー

すべてのブラウザで動作するため、データをシリアル化したり準備したりする必要はありません。 欠点の 1 つは、進捗状況を監視できないことです。

また、少なくとも Chrome では、リクエストは開発者ツールの「xhr」タブではなく「doc」に表示されます。

Answer 2

私が抱えていた問題は、間違った jQuery 識別子を使用したことでした。

フォームを使用できますUse ajax を使用してデータとファイルをアップロードできます。

PHP HTML

リーリー

jQuery Ajax

リーリー

簡易バージョン

リーリー