L'objet FormData effectue une requête Ajax et télécharge des fichiers

不言

Libérer： 2023-04-03 09:04:01

original

3131 Les gens l'ont consulté

Cet article vous expliquera comment l'objet FormData exécute les requêtes Ajax et télécharge des fichiers. Les amis dans le besoin peuvent s'y référer.

XMLHttpRequest Level2 ajoute une nouvelle interface - FormData. 【 est principalement utilisé pour envoyer des données de formulaire, mais peut également être utilisé indépendamment pour transmettre des données saisies. Par rapport à l'Ajax ordinaire, il peut télécharger des fichiers binaires de manière asynchrone ]

À l'aide de l'objet FormData, vous pouvez utiliser certaines paires clé-valeur pour simuler une série de contrôles de formulaire via js, et vous pouvez également soumettre le formulaire de manière asynchrone en utilisant la méthode send() de XMLHttpRequest.

Tout d'abord, la méthode traditionnelle de soumission de formulaire (sérialisation de formulaire) a été abordée dans la précédente "Méthode de transmission de paramètres pour l'interaction front-end et backend", qui ne convient que pour transmettre des informations générales. paramètres Le flux du fichier téléchargé ne peut pas être sérialisé et livré. Par conséquent, en utilisant FormData, vous pouvez facilement le combiner avec ajax pour télécharger des fichiers.

1. Avant d'introduire l'utilisation de FormData pour effectuer des requêtes Ajax et télécharger des fichiers, commençons par connaître FormData et son utilisation :::::

Le brouillon du W3C propose trois options pour obtenir ou modifier les données de formulaire :::

WAY1 : créez un objet de données de formulaire vide, puis ajoutez-le un par un. en utilisant append() Paire clé-valeur

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

Copier après la connexion

Les valeurs de "userFile" et "webmasterfile" ci-dessus contiennent toutes deux un fichier

;

La valeur du champ peut être un objet Blob, un objet File ou une chaîne. D'autres types seront automatiquement convertis en chaînes - comme "accountNum" ci-dessus.

WAY2 : Prendre l'objet élément de formulaire comme paramètre et le passer dans l'objet FormData

—— Pseudo code——

var new_FormData = new FormData( someFormElement );

Copier après la connexion

Exemple :

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

Copier après la connexion

Vous pouvez également ajouter de nouvelles paires clé-valeur basées sur le formulaire existant :

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

Copier après la connexion

Vous pouvez ajouter des champs fixes que vous ne souhaitez pas que les utilisateurs modifient de cette manière avant l'envoi.

WAY3 : Utilisez la méthode getFormData de l'objet formulaire pour générer

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

Copier après la connexion

Utilisez l'objet FormData et combinez-le avec js natif, réalisez le téléchargement asynchrone d'images via ajax. Bien entendu, le principe des plug-ins de téléchargement par lots jquery existants est d'utiliser FormData.

2. Utilisez l'objet FormData pour envoyer des fichiers binaires ::::::

way1 : Initialisez FormData via le formulaire. form

1. Il existe un élément de formulaire contenant une zone de saisie de fichier en 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>

Copier après la connexion

2. l'utilisateur a sélectionné Fichier

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

Copier après la connexion

WAY2 : ajouter directement un objet File ou un objet Blob à l'objet FormData sans utiliser le formulaire

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

Copier après la connexion

Si une valeur de champ dans l'objet FormData est un objet Blob, lors de l'envoi d'une requête HTTP, la valeur de la requête "content-Disposition" représentant le nom du fichier contenu dans l'objet Blob varie selon les navigateurs. Différences :

Firefox utilise une chaîne fixe "blob", tandis que Chrome utilise une chaîne aléatoire.

WAY3 : Utilisez Jquery pour envoyer FormData (les éléments pertinents doivent être définis correctement)

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

Copier après la connexion

3. Exemple

1. Utilisez FromData pour effectuer des requêtes Ajax et télécharger des fichiers

<form id="uploadForm">
      指定文件名:<input type="text" name="filename" value="">
      上传文件:<input type="file" name="file">
      
       <input type="button" value="上传" onclick="doUpload()"></form>

Copier après la connexion

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

Copier après la connexion

2. Utilisez FormData pour soumettre des formulaires et télécharger des images

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

Copier après la connexion

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

Copier après la connexion