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

不言

リリース： 2023-04-03 09:04:01

オリジナル

3131 人が閲覧しました

この記事では、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. ブラウザの互換性