ホームページ > ウェブフロントエンド > jsチュートリアル > データとファイルのアップロードを単一の Ajax フォームに結合するにはどうすればよいですか?

データとファイルのアップロードを単一の Ajax フォームに結合するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-12-14 03:17:10
オリジナル
619 人が閲覧しました

How to Combine Data and File Uploads in a Single Ajax Form?

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

Web 開発では、データとファイルの両方を Ajax から同時に送信する機能。単一の形式が重要です。非同期アプローチである Ajax を使用すると、開発者はこれをシームレスに実現できます。

Ajax フォームでデータとファイルのアップロードを組み合わせる方法を理解するために、まずデータとファイルを個別に処理する従来の方法を調べてみましょう。

Serialize()

jQuery によるデータの処理.serialize() メソッドは、フォーム要素をクエリ文字列に変換し、Ajax リクエストでサーバーに送信できます。例:

1

2

3

4

5

6

7

8

9

10

11

12

13

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

 

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

 

    $.ajax({

        url: window.location.pathname,

        type: 'POST',

        data: formData,

        success: function (data) {

            alert(data)

        }

    });

});

ログイン後にコピー

FormData によるファイルの処理

ファイルのアップロードの場合、 new FormData($(this)[0]) はフォームを表す FormData オブジェクトを作成します。データとファイル。以下に例を示します。

1

2

3

4

5

6

7

8

9

10

11

12

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

 

    var formData = new FormData($(this)[0]);

 

    $.ajax({

        url: window.location.pathname,

        type: 'POST',

        data: formData,

        contentType: false,

        processData: false

    });

});

ログイン後にコピー

データとファイルの結合

データとファイルのアップロードの両方を結合するには、単に FormData オブジェクトを使用し、以下を含むすべてのフォーム要素を追加します。ファイル入力。たとえば、次のフォーム HTML を考えてみましょう:

1

<form>

ログイン後にコピー

そして、対応する jQuery および Ajax コード:

1

2

3

4

5

6

7

8

9

$("form#datafiles").submit(function(e) {

    e.preventDefault();

 

    var formData = new FormData(this);

 

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

        alert(data);

    });

});

ログイン後にコピー

このコードは、フォームからデータとファイルの両方を収集し、それらをフォームに送信します。

データとファイルの処理の背後にある原則を理解することで、両方の方法を簡単に組み合わせて堅牢な Ajax を作成できます。複雑なデータ送信をサポートするフォーム。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート