Introduction détaillée à l'objet FormData en HTML

Aujourd'hui, je vais vous donner une introduction détaillée à l'objet FormData. Créons un objet FormData à partir de zéro, puis ajoutons des valeurs clés à l'objet via la méthode append(). Veuillez voir le cas

var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"
// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like object
var content = &#39;<a id="a"><b id="b">hey!</b></a>&#39;; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");

Remarque : Les champs "userfile" et "webmasterfile"

contiennent tous deux le fichier (fichier). Le numéro attribué au champ "accountnum" est directement converti en string par la méthode FormData.append() (la valeur du champ peut être un Blob, un File, ou une chaîne : si la valeur est les deux S'il ne s'agit pas d'un Blob ou d'un Fichier, la valeur sera convertie en chaîne).

Cet exemple crée une instance FormData contenant les champs "username", "accountnum", "userfile" et "webmasterfile", puis utilise la méthode send() de l'objet XMLHttpRequest pour envoyer les données du formulaire. Le champ « webmasterfile » est un Blob. Un objet Blob représente les données brutes d'un objet fichier. Mais les données représentées par Blob ne doivent pas nécessairement être des données au format JavaScript natif. L'interface de fichier est basée sur Blob, héritant de la fonctionnalité Blob et étendant sa prise en charge des

systèmes de fichiers des utilisateurs. Pour construire un Blob, appelez le constructeur Blob().

Obtenir un objet FormData à partir d'un

formulaire HTML

Afin d'obtenir un objet FormData contenant des données de formulaire existantes, vous devez spécifier l'élément de formulaire lors de la création de l'objet FormData .

var formData = new FormData(someFormElement);

Comme ceci :

var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));

Vous pouvez également ajouter des données supplémentaires après avoir obtenu l'objet FormData, comme ceci :

var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);

De cette façon, vous pouvez ajouter informations complémentaires avant envoi, pas nécessairement éditées par l'utilisateur.

3. Utilisez l'objet FormData pour envoyer des fichiers

Vous pouvez utiliser FormData pour envoyer des fichiers. Un simple ff9c23ada1bcecdd1a0fb5d5a0f18437 contient juste un élément d5fd7aea971a85678ba271703566ebfd :

<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 />
  <input type="submit" value="Stash the file!" />
</form>
<div></div>

Vous pouvez ensuite utiliser le code suivant pour envoyer :

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
  var oOutput = document.querySelector("div"),
      oData = new FormData(form);
  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 when trying to upload your file.<br \/>";
    }
  };
  oReq.send(oData);
  ev.preventDefault();
}, false);

Vous pouvez également ajouter un fichier ou un blob directement à l'objet FormData, comme ceci :

<br/>

data.append("myfile", myBlob, "filename.txt");

Lors de l'utilisation de la méthode append(), le troisième paramètre peut être utilisé pour envoyer le nom du fichier (envoyé au serveur via l'en-tête Content-Disposition). Si le troisième paramètre n'est pas spécifié ou n'est pas pris en charge, la valeur par défaut du troisième paramètre est « blob ».

Si vous définissez les bonnes options, vous pouvez également l'utiliser avec jQuery :

var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // tell jQuery not to process the data
  contentType: false   // tell jQuery not to set contentType
});

Je pense que vous l'avez maîtrisé après avoir lu ces cas. Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture connexe :

Étapes de mise en œuvre de l'utilisation de Js pour faire fonctionner les cookies HTTP

Introduction détaillée au modèle objet de nomenclature d'exploitation Js

Quelle est la différence entre div et span dans la mise en page d'une page Web HTML

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!