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

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

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

Exemple :

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

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

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

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>

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

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

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

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>

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

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. Compatibilité du navigateur

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

Recommandations associées :

jQuery utilisant Méthodes FormData pour implémenter le téléchargement de fichiers

Utilisez FormData pour télécharger des fichiers via Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!