Das FormData-Objekt stellt eine Ajax-Anfrage und lädt Dateien hoch

Der Inhalt dieses Artikels besteht darin, Ihnen mitzuteilen, wie das FormData-Objekt Ajax-Anfragen stellt und Dateien hochlädt. Freunde in Not können darauf verweisen.

XMLHttpRequest Level2 fügt eine neue Schnittstelle hinzu – FormData. 【 wird hauptsächlich zum Senden von Formulardaten verwendet, kann aber auch unabhängig zum Übertragen verschlüsselter Daten verwendet werden. Im Vergleich zu gewöhnlichem Ajax kann es Binärdateien asynchron hochladen ]

Mit dem FormData-Objekt können Sie einige Schlüssel-Wert-Paare verwenden, um eine Reihe von Formularsteuerelementen über js zu simulieren. Sie können das Formular auch asynchron mit der send()-Methode von XMLHttpRequest senden.

Zunächst wurde im vorherigen Abschnitt „Parameterübergabemethode für Front-End- und Backend-Interaktion“ die traditionelle Formularübermittlungsmethode (Formularserialisierung) besprochen, die nur für die allgemeine Übergabe geeignet ist Parameter Der Dateistream der hochgeladenen Datei kann nicht serialisiert und übermittelt werden. Daher können Sie FormData problemlos mit Ajax kombinieren, um Dateien hochzuladen.

1. Bevor wir die Verwendung von FormData zum Erstellen von Ajax-Anfragen und zum Hochladen von Dateien vorstellen, lernen wir zunächst FormData und seine Verwendung kennen:::::

Der W3C-Entwurf bietet drei Optionen zum Abrufen oder Ändern von Formulardaten:::

WAY1: Erstellen Sie ein leeres Formulardatenobjekt und fügen Sie es dann einzeln hinzu mit append() Schlüssel-Wert-Paar

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()把数据发送出去

Die Werte von „userFile“ und „webmasterfile“ oben enthalten beide eine Datei; 🎜> Feld Der Wert kann ein Blob-Objekt, ein Dateiobjekt oder eine Zeichenfolge sein. Andere Typen werden automatisch in Zeichenfolgen konvertiert – wie oben „accountNum“.

WAY2: Nehmen Sie das Formularelementobjekt als Parameter und übergeben Sie es an das FormData-Objekt

—— Pseudo Code——

var new_FormData = new FormData( someFormElement );

Beispiel:

var FormElement = document.getElementById("myFormElement");var oReq = new XMLHttpRequest();
oReq.open("POST","     .php");
oReq.send(new FormData(FormData));

Sie können auch neue Schlüssel-Wert-Paare basierend auf der vorhandenen Form hinzufügen:

var FormElement = document.getElementById("myFormElement");var formData = new FormData(FormElement);
formData.append("serialnumber",serialNumber++);var oReq = new XMLHttpRequest();
oReq.send(formData);

Sie können einige feste Felder hinzufügen, die Benutzer vor dem Senden nicht auf diese Weise bearbeiten sollen.

WAY3: Verwenden Sie die getFormData-Methode des Formularobjekts, um

var formobj = document.getElementById("myFormElement");
var formdata = formobj.getFormData();

Verwenden Sie das FormData-Objekt in Kombination mit natives js implementiert über Ajax das asynchrone Hochladen von Bildern. Das Prinzip vorhandener JQuery-Batch-Upload-Plug-Ins besteht natürlich darin, FormData zu verwenden.

2. Verwenden Sie das FormData-Objekt, um Binärdateien zu senden::::::

way1: FormData über das Formular initialisieren Formular

1. Es gibt ein Formularelement, das ein Dateieingabefeld in HTML enthält

<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. Dateien asynchron hochladen der Benutzer

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: Fügen Sie ein File-Objekt oder ein Blob-Objekt direkt zum FormData-Objekt hinzu, ohne das Formular

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);

zu verwenden Wenn ein Feldwert im FormData-Objekt ein Blob-Objekt ist, unterscheidet sich beim Senden einer HTTP-Anfrage der Wert der „content-Disposition“-Anfrage, der den Dateinamen der im Blob-Objekt enthaltenen Datei darstellt, in verschiedenen Browsern:

Firefox verwendet eine feste Zeichenfolge „blob“, während Chrome eine zufällige Zeichenfolge verwendet.

WAY3: Verwenden Sie Jquery, um FormData zu senden (relevante Elemente müssen korrekt eingestellt sein)

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请求头});

Beispiel

1. Verwenden Sie FromData, um Ajax-Anfragen zu stellen und Dateien hochzuladen

<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. Verwenden Sie FormData, um Formulare einzureichen und Bilder hochzuladen

<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. Browserkompatibilität

Verwandte Empfehlungen:

Chrome	Firefox(Gecko)	IE	Opera	Safari
7+	4.0(2.0)+	10+	12+	5+

Wie jQuery FormData zum Hochladen von Dateien verwendet

Verwenden Sie FormData, um Dateien über Ajax hochzuladen

Das obige ist der detaillierte Inhalt vonDas FormData-Objekt stellt eine Ajax-Anfrage und lädt Dateien hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!