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 = '975f881abd041d8a9a52113a3d7608728ad3eee38b36f0786840bfc85b25539ahey!0d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed'; // 新文件的正文...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 :

ff146639ecf87721cba4be18b8688d52
  2e1cf0710519d5598b1f0f14c36ba674Your email address:8c1ecd4bb896b2264e0711597d40766c
  fdd4de8b295fab4aa0708ba29a56a4f8ff9d32c555bb1d9133a29eb4371c1213
  2e1cf0710519d5598b1f0f14c36ba674Custom file label:8c1ecd4bb896b2264e0711597d40766c
  3c2750d34148cf8c03cc62edc6c563efff9d32c555bb1d9133a29eb4371c1213
  2e1cf0710519d5598b1f0f14c36ba674File to stash:8c1ecd4bb896b2264e0711597d40766c
  965e00529aa4b86d8dd68bfcdaa48288
  5fa1d26c6939704a2c990d4281d4b44df5a47148e367a6035fd7a2faa965022ee388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

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.666a5bd9fab33f2f6688eb1baf827b5d";
    }
  };

  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!