Analyse détaillée de l'utilisation de l'objet HTML5 FormData

XMLHttpRequest Level 2 ajoute une nouvelle interface - FormData 。En utilisant FormData 对象， nous pouvons utiliser certaines paires clé-valeur pour simuler une série de contrôles de formulaire via JavaScript Nous pouvons également utiliser l'envoi XMLHttpRequest. () pour soumettre le formulaire de manière asynchrone. Par rapport à l'Ajax ordinaire, le plus grand avantage de l'utilisation de FormData est que nous pouvons télécharger des fichiers binaires de manière asynchrone.

Créer un objet FormData

Vous pouvez d'abord créer un objet FormData  vide, puis utiliser la méthode append()  pour ajouter des champs à l'objet, comme suit :

var oMyForm = new FormData();

oMyForm.append("username", "Groucho");
oMyForm.append("accountnum", 123456); // 数字123456被立即转换成字符串"123456"

// fileInputElement中已经包含了用户所选择的文件
oMyForm.append("userfile", fileInputElement.files[0]);

var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; // Blob对象包含的文件内容
var oBlob = new Blob([oFileBody], { type: "text/xml"});

oMyForm.append("webmasterfile", oBlob);

var oReq = new XMLHttpRequest();
oReq.open("POST", "http://foo.com/submitform.php");
oReq.send(oMyForm);

Remarque : Les valeurs des champs "userfile" et "webmasterfile" contiennent tous deux un fichier. Les nombres attribués au champ "accountnum" via la méthode FormData.append()  sont automatiquement convertis en caractères (la valeur du champ peut être un objet Blob , un objet File ou une chaîne, et les autres types de valeurs restants seront être automatiquement converti en chaîne de caractères).

Dans cet exemple, nous créons un objet FormData nommé oMyForm, qui contient des noms de champs nommés "username", "accountnum", "userfile" et "webmasterfile", puis utilisons la méthode XMLHttpRequest de send()  envoie ces données. La valeur du champ "webmasterfile" n'est pas une chaîne, mais un objet Blob .

Utilisez Formulaire HTML pour initialiser un objet FormData

Vous pouvez utiliser un élément de formulaire existant pour initialiser FormData 对象， Passez simplement cet élément form  en paramètre Saisissez le FormData  constructeur  :

var newFormData = new FormData(someFormElement);

Par exemple :

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

Vous pouvez également continuer à ajouter de nouvelles données de formulaire en fonction des données de formulaire existantes. La clé- les paires de valeurs sont les suivantes :

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

Vous pouvez ajouter des champs fixes que vous ne souhaitez pas que les utilisateurs modifient de cette manière, puis les envoyer

Utilisez l'objet FormData pour. envoyer le fichier

Vous pouvez également utiliser FormData  pour envoyer des fichiers binaires. Tout d'abord, il doit y avoir un élément de formulaire contenant une zone de saisie de fichier en HTML :

<form enctype="multipart/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>

Ensuite, vous pouvez utiliser. le code suivant pour télécharger de manière asynchrone le fichier sélectionné par l'utilisateur :

function sendForm() {
  var oOutput = document.getElementById("output");
  var oData = new FormData(document.forms.namedItem("fileinfo"));

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
    }
  };

  oReq.send(oData);
}

Vous pouvez également ajouter directement un objet FormData  ou un objet File  à l'objet Blob  sans utiliser de formulaire HTML :

data.append("myfile", myBlob);

　Si une valeur de champ dans l'objet FormData est un objet Blob , lors de l'envoi d'une requête HTTP, elle représente le "Content-Dis" du nom de fichier du fichier Blob  contenu par l'objet . La valeur de l'en-tête de requête position" varie selon les navigateurs. Firefox utilise une chaîne fixe "blob", tandis que Chrome utilise une chaîne aléatoire.

Vous pouvez également utiliser jQuery pour envoyer

FormData，但必须要正确的设置相关选项：

var fd = new FormData(document.getElementById("fileinfo"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // 告诉jQuery不要去处理发送的数据
  contentType: false   // 告诉jQuery不要去设置Content-Type请求头
});

Compatibilité du navigateur

Bureau :

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	7+	4.0 (2.0)	10+	12+	5+
支持filename参数	(Yes)	22.0 (22.0)	?	?	?

Mobile :

Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Support de base 3.0  ? 4.0 (2.0) ?

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	3.0	?	4.0 (2.0)	?	12+	?
支持filename参数	?	?	22.0 (22.0)	?	?	?

12+ ? Support Paramètre nom de fichier ? ? 22.0 (22.0) ? td> ? ?

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!