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

616446c85450afc472a9bd8ec9e64146

      2e1cf0710519d5598b1f0f14c36ba674your email address:8c1ecd4bb896b2264e0711597d40766c
      77ea3818c28708bdfa2d740f63ca84430c6dc11e160d3b678d68754cc175188a

      2e1cf0710519d5598b1f0f14c36ba674custom file label:8c1ecd4bb896b2264e0711597d40766c
      c53720150e0e40fa90d71213512a19430c6dc11e160d3b678d68754cc175188a

      2e1cf0710519d5598b1f0f14c36ba674File to stash:8c1ecd4bb896b2264e0711597d40766c
      37618ecaa97ade89cdcd8c57e3705350f5a47148e367a6035fd7a2faa965022e8682d3dcb51d71511882c0fb08275db494b3e26ee717c64999d7867364b1b4a334fbcf1a3d1404e3f48634a414c8f9f7stash the file !5db79b134e9f6b82c0b36e0489ee08ed

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!