Soumission de fichiers à l'aide du formulaire et de FormData.

1.

Avant de passer aux instructions de soumission de fichier, examinons d'abord la balise de formulaire. . Le formulaire a de nombreux attributs, ici je n'expliquerai que les deux attributs suivants :

1, méthode (enctype est 'application /x-www-form-urlencoded')

Dans la plupart des cas, seuls GET et POST seront utilisés.

①GET : Lors de l'utilisation de GET pour la soumission d'un formulaire, l'agent utilisateur (navigateur) traitera automatiquement chaque composant d'entrée en fonction de nom = valeur (utilisez encodeURIComponent pour le nom et la valeur respectivement) Encodage, puis utilisez « = » pour connecter les paires clé-valeur codées et utilisez « & » pour connecter plusieurs paires clé-valeur) pour générer une chaîne de requête, qui est connectée à la fin de l'URL.

  ②POST : POST générera également une chaîne identique à GET, mais cette chaîne est écrite dans l'en-tête de la requête http, plutôt que d'être ajouté à la fin de l'URL.

La principale différence entre les deux est la suivante :

GET a une limite sur la taille des données soumises, généralement 2 Ko, tandis que POST n'a aucune limite en théorie (mais la taille réelle est d'environ 2 Go).

2. enctype

Comme mentionné ci-dessus, la valeur par défaut du formulaire est 'application/x-www-form-urlencoded', qui est enctype Une des trois valeurs. Discutons ensuite de ces trois valeurs en détail.

①application/x-www-form-urlencode : La valeur par défaut pour la soumission du formulaire. Les comportements correspondant à POST et GET ont été discutés ci-dessus et ne seront pas répétés ici ;

②text/plain : Lors de la prise de cette valeur, la valeur du formulaire ne sera pas codée, mais sera soumise au serveur backend en texte brut. Cette valeur est fondamentalement inutilisée. Parce qu'il ne peut pas fournir une bonne prise en charge des données binaires lors de la soumission de fichiers.

③multipart/form-data : Lorsque enctype utilise cette option, le navigateur n'encodera pas les caractères, mais : en unités de contrôles (entrée, etc.) Divisez-le et ajoutez Content-Disposition : données du formulaire, nom (nom correspondant à l'entrée), nom de fichier (si un fichier est soumis, il y aura un champ modifié) et Content-Type (identique au champ précédent, le fichier de soumission existe) : fichier type (facilement falsifié). Et ajoutez également une limite (délimiteur, différents navigateurs sont différents et chaque soumission est différente)

Enfin, ces informations seront être intégrés ensemble, codés dans un message et soumis au serveur (sous forme de données binaires).

Il convient de noter que : Étant donné que l'objectif principal est de télécharger des fichiers, il existe certaines exigences concernant la taille du téléchargement, de sorte que la méthode ne peut être sélectionnée que si GET est utilisé. à télécharger, alors seul un faux chemin vers le fichier sera soumis.

Cette option est une option qui doit être utilisée lors du téléchargement de fichiers. Après avoir défini enctype sur "multipart/form-data", vous pouvez utiliser est un exemple de démonstration :

1. <formulaire action= "server.js" méthode="POST" enctype ="multipart/form-data">  

2.   <entrée type="fichier" nom="fichier0">  

3. <entrée type= "soumettre" valeur="télécharger">

4. formulaire>

En plus d'utiliser des formulaires pour soumettre des fichiers, on utilise généralement davantage d'ajax sans actualiser la page. Voyons comment utiliser ajax pour soumettre des fichiers sans actualiser la page !

2. FormData

FormData est une API fournie par ES, qui peut être utilisée pour implémenter la soumission de fichiers ajax :

Voyons comment utiliser FormData :

var formData = new FormData(); //Pour créer une instance, vous pouvez transmettre le Nœud DOM correspondant au formulaire En paramètre, les données du formulaire seront enregistrées dans l'instance formData.

formData.append(name, value); //Utilisez la méthode append et transmettez la clé et la valeur correspondantes

// Autres codes

Enfin, form Jetez simplement l’instance dans xhr.send();.

xhr.send(formData);

var xhr = new XMLHttpRequest();
//使用FormData构造函数创建一个FormData的实例 
var formData = new FormData(); 
// formData.append('file0', oInput.value);
//注意，这里的value不是普通的表单value，而是一个file对象 
formData.append('file0', oInput.files[0]); 
xhr.open('POST', 'http://localhost:8080');  
xhr.onload = function(){  
  if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {  
    console.log(xhr.responseText);  
  }  
};
//form表单的默认值为①，而FormData的默认值为multipart/form-data,所以不用画蛇添足的去修改请求头  
//xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;multipart/form-data&#39;);
xhr.send(formData);

Comme mentionné ci-dessus, la valeur transmise dans append n'est pas la valeur d'une entrée ordinaire, mais elle est un objet fichier. Les connaissances sur les objets fichier sont limitées par la longueur de l'article. Si vous êtes intéressé, vous pouvez le rechercher vous-même.

En plus de cela, le fonctionnement des fichiers ne concerne pas seulement les fichiers généraux de petite taille, mais est également plus similaire au fonctionnement de fichiers volumineux tels que les vidéos des sites Web de vidéos. Il ne suffit pas de les comprendre pour terminer. ces tâches. Apprenez également les API pertinentes et ayez une compréhension approfondie des objets blob. Vous pouvez aller apprendre par vous-même. Je publierai un résumé de cet aspect plus tard.

Cet article explique le contenu lié à la soumission de fichiers à l'aide du formulaire et de FormData. Pour plus de contenu connexe, veuillez prêter attention au site Web chinois php.

Recommandations associées :

Opération DOM dans JQuery - wrap

django utilise la requête pour obtenir les paramètres envoyés par le navigateur

Quelques réflexions sur React cette liaison

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!