Fichiers d'introduction et d'implémentation HTML5 FormData sur le fichier d'implémentation

XMLHTTPRequest est une interface de navigateur. XMLHTTPRequest est un moyen couramment utilisé d'interagir les données dans le navigateur actuel. En février 2008, le niveau 2 XMLHTTPRequest a été proposé. que vous pouvez télécharger des fichiers binaires. Introduisons comment télécharger des fichiers avec FormData.

Regardez d'abord le mode de base de FormData: FormData Objet, vous pouvez former une question de tous les éléments de la table et la valeur et la soumettre à l'arrière-plan. Passez simplement la forme de formulaire en tant que paramètre dans le constructeur FormData:

 var form = document.getElementById (form1); var fd = new formData (form);

De cette façon, la FD peut être envoyée directement via la méthode Ajax Send () à l'arrière-plan.

Le formulaire suivant est créé.

 <Form name = form1 id = form1> <p> name: <input type = text name = name /> <p> sexe: <input type = radio name = sexe value = 1 /> mâle <try type = radio name = Valeur de genre = 2 / P> Femme </p> <p> Stu-Number: <Input Type = Text Name = Number /> </p> <p> Photo: <Input Type = File Name = Photo ID = Photo> </p> <p> <Type d'entrée = Nom de Button = B1 Valeur = Soumidre OnClick = FSUBMIT () / P> </ Form> <div id = Result> </div>

Le code ci-dessus crée un formulaire, remplissez simplement certaines informations et sélectionnez une image comme avatar, définissez un div pour stocker le résultat du retour.

Pour simple, nous utilisons toujours Ajax encapsulé par jQuery pour transférer des données vers l'arrière-plan:

 Fonction fSUBMit () {var form = document.getElementyId (form1); Tell à JQuery, ne traitez pas les données de contenu: false, // Dites à JQuery de ne pas définir le succès de la demande de type contenu: fonction (réponse, statut, xhr) {console.log (xhr); ejson (réponse); var result = ''; + JSON ['Number']; .html (résultat);}});

Le serveur.php dans le code ci-dessus est le fichier du serveur, recevant la demande AJAX et renvoyant le résultat de réception.

 <? Isset ($ _ Post ['Number'])? [Nom '] = $ Name; $ Response [Gender'] = $ Gender; '] = false;} echo json_encode ($ réponse);?>

Après avoir rempli les informations, cliquez sur Soumettre pour obtenir les effets suivants sur la page.

Si vous êtes un passionné de JavaScript natif, bien sûr, les fonctions ci-dessus peuvent être obtenues.

 Fonction fsUbmit () {var form = Document.getElementById (Form1); (olq. ReadyState == 4) {if (oreq.status == 200) {console.log (typeof oreq.ResponSext); Informations personnelles: <br/> Nom: + JSON ['name'] + <br/> Gender: + JSON ['Gender'] + <br/> Number: + JSON ['Number']; <<< Br /> Avatar: <img src = '+ json [' photo '] +' height = 50 style = border-radius: 50%; Post, server.php); Oreq.Send (formdata);

En plus des nouveaux objets ci-dessus FormData, la forme est directement transmise dans le paramètre et il existe d'autres fonctions. La plupart des articles introduits par FormData sur Internet ne mentionnent que la méthode APEND (). Console pour savoir:

Après la console, nous avons une découverte majeure.

La méthode append () est utilisée pour ajouter des valeurs clés à l'objet FormData:

 fd.append ('key1', value1);

FD est l'objet de FormData, qui peut être nouvellement construit.

Définir la valeur de valeur clé correspondante (s)

 fd.set ('key1', value1);

Il ressemble un peu à la méthode annexe (). Comparez encore à travers l'exemple, nous sommes basés sur la forme du formulaire avant.

 fd.append ('name', will);

Deux touches sont la valeur clé du nom:

 fd.set ('name', will);

Une seule clé est la valeur clé du nom:

Ce qui précède est la différence entre A SPED () et Set (). Si l'ensemble de valeur définie n'existe pas, l'effet des deux est le même.

Recevez un paramètre, indiquant que le nom de la valeur clé que vous souhaitez supprimer, s'il y a plusieurs mêmes valeurs de clé, elle le supprimera:

 fd.append ('name', 'will');

Les informations de nom sous forme et les informations nouvellement ajoutées sur le nom via ANDET () ont été supprimées.

Recevez un paramètre pour indiquer le nom de la clé que vous devez trouver et renvoyer la première valeur de valeur de la première clé. S'il y a plusieurs mêmes touches et renvoyez toute la valeur de valeur correspondante de cette clé.

Basé sur la forme ci-dessus:

 fd.append ('name', 'will');

 fd.append ('name', 'will');

Cette méthode reçoit également un paramètre, qui est également le nom de la clé, renvoyant une valeur booléenne pour déterminer si l'objet FormData contient la clé. Le formulaire ci-dessus est un exemple:

 console.log (fd.has ('name'));

Cette méthode n'a pas besoin de recevoir des paramètres et de renvoyer un itérateur. Le formulaire ci-dessus est un exemple:

 for (var key de fd.keys ()) {console.log (key);}

Le résultat est:

nom

genre

nombre

Photo

Avec l'itérative de la clé, bien sûr, il est indispensable de traverser l'itérateur de valeur. Values ​​() est un itérateur de la valeur.

 pour (valeur var de fd.values ​​()) {console.log (valeur);}

résultat:

Il y a un itérateur qui traverse la clé, et il y a aussi les itérateurs de valeur, pourquoi ne pas s'engager dans deux ensemble! Entrées () consiste à renvoyer un itérateur contenant une paire de valeurs de clé:

 pour (var paire de fd.entries ()) {console.log (paire [0] + ',' + paire [1]);}

résultat:

Étant donné que FormData est une nouvelle interface de XMLHTTPRequest Level 2, le navigateur IE qui est désormais inférieur à IE10 ne prend pas en charge FormData. La figure ci-dessous:

Ce qui précède est tout le contenu de cet article.