ホームページ  >  記事  >  バックエンド開発  >  FormData() と jQuery AJAX を使用してファイルと文字列データの両方を送信する方法

FormData() と jQuery AJAX を使用してファイルと文字列データの両方を送信する方法

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-10-22 14:39:02887ブラウズ

How to Send Both File and String Data with FormData() and jQuery AJAX?

FormData() と jQuery AJAX を使用したファイルと文字列データの両方の投稿

多くの場合、ファイルと入力文字列データの両方を送信する必要があります。 AJAX リクエスト。 FormData() を使用してこれを実現するには、次の手順に従います:

  1. FormData オブジェクトを作成します:

    <code class="js">var fd = new FormData();</code>
  2. ファイル データの追加:
    a.単一ファイルの場合:

    <code class="js">fd.append("file", file_data);</code>

    b.複数のファイルの場合:

    <code class="js">var file_data = $('input[type="file"]')[0].files; // for multiple files
    for(var i = 0;i<file_data.length;i++){
        fd.append("file_"+i, file_data[i]);
    }</code>
  3. 文字列データの追加:

    <code class="js">var other_data = $('form').serializeArray();
    $.each(other_data,function(key,input){
        fd.append(input.name,input.value);
    });</code>
  4. でデータを送信AJAX:

    <code class="js">$.ajax({
        url: 'url',
        data: fd,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(data){
            alert(data);
        }
    });</code>

次の手順に従うことで、同じ FormData オブジェクトと AJAX リクエスト内でファイル データと入力文字列データの両方を送信できます。

以上がFormData() と jQuery AJAX を使用してファイルと文字列データの両方を送信する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。