Utilisation de FormData dans les objets JavaScript

Utilisation de l'objet FormData

Dans cet article

1. Comment créer un objet FormData

2. Créé via un formulaire HTML Objet FormData

3. Utilisez l'objet FormData pour télécharger des fichiers

4. Vous pouvez soumettre des formulaires et télécharger des fichiers via AJAX sans utiliser l'objet FormData

5. Liens connexes

L'objet FormData peut être utilisé pour assembler un ensemble de paires clé/valeur utilisées pour envoyer demandes avec XMLHttpRequest. Cela rend l'envoi de données de formulaire plus flexible et plus pratique car il peut être utilisé indépendamment du formulaire. Si vous définissez le type d'encodage du formulaire sur multipart/form-data, le format de données transmis via FormData est le même que le format de données transmis par le formulaire via la méthode submit()

Comment créer un objet FormDataEdit

Vous pouvez créer vous-même un objet FormData puis ajouter des champs en appelant sa méthode append(), comme ceci :

var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // 数字 123456 会被立即转换成字符串 "123456"// HTML 文件类型input，由用户选择formData.append("userfile", fileInputElement.files[0]);// JavaScript file-like 对象var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

Remarque : Les champs "userfile" et "webmasterfile" contiennent tous deux un fichier. Le champ "accountnum" est un type numérique, qui sera converti en type chaîne. par la méthode FormData.append() (FormData Le type de champ de l'objet peut être Blob, File ou chaîne : Si son type de champ n'est pas Blob ou File, il sera converti en type chaîne. L'exemple ci-dessus crée une instance contenant quatre champs : "username", "accountnum", "userfile" et "webmasterfile", puis utilise la méthode

pour envoyer les données du formulaire. 🎜> type. Un objet

BlobFormData représente un objet fichier immuable, semblable à des données brutes. Les données représentées par Blob ne sont pas nécessairement un format natif JavaScript. L'interface XMLHttpRequest est basée sur Blob et hérite de la fonctionnalité blob. . Étendez cela pour prendre en charge les fichiers sur le système de l'utilisateur. Vous pouvez créer un objet Blob via le constructeur send()BlobCréer un objet FormData via un formulaire HTML ModifierFileBlob().

Pour construire un objet FormData contenant les données du formulaire Form, vous devez spécifier les éléments du formulaire lors de la création de l'objet FormData

Vous. Vous pouvez également Après avoir créé un objet FormData contenant les données du formulaire Form et avant d'envoyer la demande, ajouter des données supplémentaires à l'objet FormData, comme ceci :

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

afin que vous N'hésitez pas à ajouter des champs qui ne sont pas nécessairement modifiables par l'utilisateur aux données du formulaire avant d'envoyer la demande

Utilisez l'objet FormData pour télécharger des fichiers

Modifier

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

Vous pouvez également utiliser FormData pour télécharger des fichiers Lorsque vous l'utilisez, vous devez ajouter une entrée de type de fichier au formulaire :

, puis utiliser le. code suivant pour envoyer la requête :

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

Remarque :

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {  var oOutput = document.querySelector("p"),
      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);

Si l'objet FormData est créé via un formulaire, la méthode de requête spécifiée dans le formulaire sera appliquée dans la méthode open().

Vous pouvez également joindre directement des fichiers de type File ou Blob à l'objet FormData, comme indiqué ci-dessous :

Lorsque vous utilisez la méthode appned(), vous pouvez la définir via la troisième option facultative. paramètre Envoyer l'en-tête de la requête pour spécifier le nom du fichier. Si aucun nom de fichier n'est spécifié (ou si ce paramètre n'est pas supporté), le nom "blob" sera utilisé.

Si vous définissez les éléments de configuration corrects, vous pouvez également utiliser l'objet FormData via jQuery :

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

Content-Disposition 

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!