Analyse détaillée de l'utilisation de l'objet HTML5 FormData-Tutoriel H5-php.cn

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

黄舟

Libérer： 2017-03-22 15:29:30

original

1903 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

Par exemple :

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

data.append("myfile", myBlob);

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

Copier après la connexion

Compatibilité du navigateur

Bureau :