目次
方法 1: フォーム フォームを通じて FormData を初期化します。 " >方法 1: フォーム フォームを通じて FormData を初期化します。
Firefox(Gecko)" >ChromeFirefox(Gecko)
ホームページ バックエンド開発 PHPチュートリアル FormData オブジェクトは Ajax リクエストを作成し、ファイルをアップロードします

FormData オブジェクトは Ajax リクエストを作成し、ファイルをアップロードします

Jul 18, 2018 pm 04:20 PM

この記事では、FormData オブジェクトを使用して Ajax リクエストを作成し、ファイルをアップロードする方法を共有します。必要な友人は参照してください。

XMLHttpRequest Level2 には、新しいインターフェイス FormData が追加されます。 [ は主にフォーム データの送信に使用されますが、キー付きデータの送信に単独で使用することもできます。通常の Ajax と比較して、バイナリ ファイルを非同期でアップロードできます]

FormData オブジェクトを使用すると、いくつかのキーと値のペアを使用して、js を通じて一連のフォーム コントロールをシミュレートできます。また、XMLHttpRequest の send() メソッドを使用してフォームを非同期に送信することもできます。

まず、前回の「フロントエンドとバックエンドの相互作用のためのパラメーター受け渡し方法」では、従来のフォーム送信方法 (フォームのシリアル化) について説明しました。一般的なパラメータを渡すのに適しています。アップロードされたファイルのファイル ストリームをシリアル化して配信することはできません。したがって、FormData を使用すると、ajax と組み合わせてファイルを簡単にアップロードできます。

#1. FormData を使用して Ajax リクエストを作成し、ファイルをアップロードする方法を紹介する前に、まず FormData とその使用法について理解しましょう:::::

W3C ドラフトでは、フォーム データを取得または変更するための 3 つのオプションが提供されています:::

方法 1: 空のフォーム データ オブジェクトを作成し、append() を使用して追加します1 つずつキーと値のペア

var oMyForm = new FormData();    // 创建一个空的FormData对象
oMyForm.append("userName","Coco");       // append()方法添加字段
oMyForm.append("accountNum",123456);   // 数字123456立即被转换成字符串“123456”
oMyForm.append("userFile",fileInputElement.files[0]);var oFileBody = "<a id="a"><b id="b">hey!</b></a>";
var oBlob = new Blob([oFileBody],{type:"text/html"});  // Blob对象包含的文件内容是oFileBody
oMyForm.append("webmasterfile",oBlob);
var oReq = new XMLHttpRequest();
oReq.open("POST","   .php");
oPeq.send(oMyForm);   // 使用XMLHttpRequest的send()把数据发送出去
ログイン後にコピー

上記の「userFile」と「webmasterfile」の値には両方ともファイルが含まれています。 ## フィールド 値は、Blob オブジェクト、File オブジェクト、または文字列にすることができます。他の型は、上記の「accountNum」など、自動的に文字列に変換されます。

WAY2: フォーム要素オブジェクトをパラメータとして取得し、それを FormData オブジェクトに渡します

—— 擬似コード—

var new_FormData = new FormData( someFormElement );
ログイン後にコピー

例:

var FormElement = document.getElementById("myFormElement");var oReq = new XMLHttpRequest();
oReq.open("POST","     .php");
oReq.send(new FormData(FormData));
ログイン後にコピー

既存のフォームに基づいて新しいキーと値のペアを追加することもできます:

var FormElement = document.getElementById("myFormElement");var formData = new FormData(FormElement);
formData.append("serialnumber",serialNumber++);var oReq = new XMLHttpRequest();
oReq.send(formData);
ログイン後にコピー

ユーザーが送信前にこの方法で編集したくない固定フィールドを追加できます。

方法 3: フォーム オブジェクトの getFormData メソッドを使用して、

var formobj = document.getElementById("myFormElement");
var formdata = formobj.getFormData();
ログイン後にコピー
FormData オブジェクトを次と組み合わせて使用​​します。ネイティブ js は、Ajax を介して画像の非同期アップロードを実装します。もちろん、既存の jquery バッチ アップロード プラグインの原則は FormData を使用することです。

2. FormData オブジェクトを使用してバイナリ ファイルを送信します:::::

方法 1: フォーム フォームを通じて FormData を初期化します。

1. HTML

<form enctype="multipare/form-data" method="post" name="fileinfo">

      <label>your email address:</label>
      <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64"/><br>

      <label>custom file label:</label>
      <input type="text" name="filelabel"  size="12" maxlength="32"/><br>

      <label>File to stash:</label>
      <input type="file" name="file" required></form><p id="Output"></p><a href="javascript:sendForm()">stash the file !</a>
ログイン後にコピー

2 にファイル入力ボックスを含むフォーム要素があります。選択したファイルを非同期でアップロードします。ユーザー

function sendForm(){      var oOutput = document.getElementById("Output");      
var oData = new FormData(document.forms.nameItem("fileInfo"));
      oData.append("customField","This is some extra data");      
      var oReq = new XMLHttpRequest();
      oReq.open("POST","     .php",true);
      oReq.onload = function(oEvent){            
      if(oReq.status == 200){
                   oOutput.innerHTML = "Uploaded!";
            }else{
                   oOutput.innerHTML = "Error" + oReq.status + "occurred uploading your file!"
            }
      };
      oReq.send(oData);
}
ログイン後にコピー

WAY2: フォーム

#

var data = new FormData();var oFileBody = "<a id="a"><b id="b">hey!</b></a>";var oBlob = new Blob([oFileBody],{type:"text/html"});

data.append("myfile",oBlob);
ログイン後にコピー
## を使用せずに、File オブジェクトまたは Blob オブジェクトを FormData オブジェクトに直接追加します。 #FormData オブジェクトのフィールド値が Blob オブジェクトの場合、HTTP リクエストを送信するときに、Blob オブジェクトに含まれるファイルのファイル名を表す「content-Disposition」リクエストの値がブラウザごとに異なります。 :

Firefox は固定文字列「blob」を使用しますが、Chrome はランダムな文字列を使用します。

WAY3: Jquery を使用して FormData を送信します (関連する項目を正しく設定する必要があります)

var fd =new FormData(document.getElementById("fileinfo"));
fd.append("customField","This is some extra data");
$.ajax({
     url:"    .php",
     type:"POST",
     data:fd,
     processData:false,   //  告诉jquery不要处理发送的数据
     contentType:false    // 告诉jquery不要设置content-Type请求头});
ログイン後にコピー
3. 例

1. FromData を使用して Ajax リクエストを作成し、ファイルをアップロードします#
<form id="uploadForm">
      指定文件名:<input type="text" name="filename" value="">
      上传文件:<input type="file" name="file">
      
       <input type="button" value="上传" onclick="doUpload()"></form>
ログイン後にコピー
function doUpload(){    var formData = new FormData($("#uploadForm")[0]);
    $.ajax({
          url:"   .php",
          type:"POST",
          data:formData,
          async:false,
          cache:false,
          contentType:false,
          processData:false,
          success:function(returndata){
                 alert(returndata);
          },
          error:function(returndata){
                 alert("error:"+returndata);
          }
    });
}
ログイン後にコピー
#2. FormData を使用してフォームを送信し、画像をアップロードします

<form name="form" id="formData">

       name:<input type="text" name="name">
       gender:<input type="radio" name="gender" value="1"> male              
       <input type="radio" name="gender" value="2"> female
       photo:<input type="file" name="photo" id="photo">

       <input type="button" name="btn" value="submit" onclick="submit();">       
       </form><p id="result"></p>
ログイン後にコピー
function submit(){       
var data = new FormData($("#formData")[0]);
       $.ajax({
              url:"    .php",
              type:"POST",
              data:data,
              dataType:"JSON",
              cache:false,
              processData:false,
              contentType:false
        }).done(function(ret){                  
        if(ret["isSuccess"]){                      
        var result = "";
                      result +="name=" + ret["name"] + "<br>";
                      result += "gender=" + ret["gender"] + "<br>";
                      result += "<img src=&#39;"+ret[&#39;photo&#39;]+"&#39;width=&#39;100&#39;>";
                             
                      $("#result").html(result);         // 提交成功后将表单数据显示在id="result"的p里面     
                  }else{
                         alert("提交失败");
                   }
         });       return false;
}
ログイン後にコピー
4. ブラウザの互換性

ChromeFirefox(Gecko)

IEオペラサファリ7 4.0(2.0) 10 12 5 jQuery は FormData を使用してファイルのアップロードを実装します
関連する推奨事項:

FormData を使用して Ajax でファイルをアップロードする

##

以上がFormData オブジェクトは Ajax リクエストを作成し、ファイルをアップロードしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

11ベストPHP URLショートナースクリプト(無料およびプレミアム) 11ベストPHP URLショートナースクリプト(無料およびプレミアム) Mar 03, 2025 am 10:49 AM

多くの場合、キーワードと追跡パラメーターで散らかった長いURLは、訪問者を阻止できます。 URL短縮スクリプトはソリューションを提供し、ソーシャルメディアやその他のプラットフォームに最適な簡潔なリンクを作成します。 これらのスクリプトは、個々のWebサイトにとって価値があります

Instagram APIの紹介 Instagram APIの紹介 Mar 02, 2025 am 09:32 AM

2012年のFacebookによる有名な買収に続いて、Instagramはサードパーティの使用のために2セットのAPIを採用しました。これらはInstagramグラフAPIとInstagram Basic Display APIです。

Laravelでフラッシュセッションデータを使用します Laravelでフラッシュセッションデータを使用します Mar 12, 2025 pm 05:08 PM

Laravelは、直感的なフラッシュメソッドを使用して、一時的なセッションデータの処理を簡素化します。これは、アプリケーション内に簡単なメッセージ、アラート、または通知を表示するのに最適です。 データは、デフォルトで次の要求のためにのみ持続します。 $リクエスト -

LaravelのバックエンドでReactアプリを構築する:パート2、React LaravelのバックエンドでReactアプリを構築する:パート2、React Mar 04, 2025 am 09:33 AM

これは、LaravelバックエンドとのReactアプリケーションの構築に関するシリーズの2番目と最終部分です。シリーズの最初の部分では、基本的な製品上場アプリケーションのためにLaravelを使用してRESTFUL APIを作成しました。このチュートリアルでは、開発者になります

Laravelテストでの簡略化されたHTTP応答のモッキング Laravelテストでの簡略化されたHTTP応答のモッキング Mar 12, 2025 pm 05:09 PM

Laravelは簡潔なHTTP応答シミュレーション構文を提供し、HTTP相互作用テストを簡素化します。このアプローチは、テストシミュレーションをより直感的にしながら、コード冗長性を大幅に削減します。 基本的な実装は、さまざまな応答タイプのショートカットを提供します。 Illuminate \ support \ facades \ httpを使用します。 http :: fake([[ 'google.com' => 'hello world'、 'github.com' => ['foo' => 'bar']、 'forge.laravel.com' =>

PHPのカール:REST APIでPHPカール拡張機能を使用する方法 PHPのカール:REST APIでPHPカール拡張機能を使用する方法 Mar 14, 2025 am 11:42 AM

PHPクライアントURL(CURL)拡張機能は、開発者にとって強力なツールであり、リモートサーバーやREST APIとのシームレスな対話を可能にします。尊敬されるマルチプロトコルファイル転送ライブラリであるLibcurlを活用することにより、PHP Curlは効率的なexecuを促進します

Codecanyonで12の最高のPHPチャットスクリプト Codecanyonで12の最高のPHPチャットスクリプト Mar 13, 2025 pm 12:08 PM

顧客の最も差し迫った問題にリアルタイムでインスタントソリューションを提供したいですか? ライブチャットを使用すると、顧客とのリアルタイムな会話を行い、すぐに問題を解決できます。それはあなたがあなたのカスタムにより速いサービスを提供することを可能にします

2025 PHP状況調査の発表 2025 PHP状況調査の発表 Mar 03, 2025 pm 04:20 PM

2025 PHP Landscape Surveyは、現在のPHP開発動向を調査しています。 開発者や企業に洞察を提供することを目的とした、フレームワークの使用、展開方法、および課題を調査します。 この調査では、現代のPHP Versioの成長が予想されています

See all articles