Maison > interface Web > js tutoriel > Utiliser FormData pour télécharger des fichiers avec Ajax

Utiliser FormData pour télécharger des fichiers avec Ajax

php中世界最好的语言
Libérer: 2018-04-03 17:27:57
original
1711 Les gens l'ont consulté

Cette fois, je vais vous présenter l'utilisation de FormData pour télécharger des fichiers avec Ajax. Quelles sont les précautions concernant l'utilisation de FormData pour télécharger des fichiers avec Ajax. Voici un cas pratique, jetons un coup d'œil.

Télécharger des fichiers via la soumission de formulaire traditionnel :

Code HTML

<form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> 
   <h1 >测试通过Rest接口上传文件 </h1> 
   <p >指定文件名: <input type ="text" name="filename" /></p> 
   <p >上传文件: <input type ="file" name="file" /></p> 
   <p >关键字1: <input type ="text" name="keyword" /></p> 
   <p >关键字2: <input type ="text" name="keyword" /></p> 
   <p >关键字3: <input type ="text" name="keyword" /></p> 
   <input type ="submit" value="上传"/> 
</form>
Copier après la connexion

Cependant, la soumission de formulaire traditionnel entraînera l'actualisation de la page, mais dans dans certains cas, nous ne souhaitons pas que la page soit actualisée. Dans ce cas, nous utilisons tous Ajax pour faire des requêtes :

Code Js

$.ajax({ 
   url : "http://localhost:8080/STS/rest/user", 
   type : "POST", 
   data : $( '#postForm').serialize(), 
   success : function(data) { 
     $( '#serverResponse').html(data); 
   }, 
   error : function(data) { 
     $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText); 
   } 
});
Copier après la connexion

As. ci-dessus, le formulaire peut être sérialisé via $('#postForm').serialize(), transmettant ainsi tous les paramètres du formulaire au serveur.

Cependant, dans la méthode ci-dessus, seuls les paramètres généraux peuvent être transmis et le flux du fichier téléchargé ne peut pas être sérialisé et transmis.
Cependant, les navigateurs grand public ont désormais commencé à prendre en charge un objet appelé FormData. Avec ce FormData, nous pouvons facilement utiliser Ajax pour télécharger des fichiers en utilisant Ajax.

À propos de FormData et de son utilisation

Qu'est-ce que FormData ? Jetons un coup d'œil à l'introduction sur Mozilla.

XMLHttpRequest Level 2 ajoute une nouvelle interface FormData. En utilisant l'objet FormData, nous pouvons utiliser certaines paires clé-valeur pour simuler une série de contrôles de formulaire via

JavaScript. Nous pouvons également utiliser l'envoi de XMLHttpRequest. () pour soumettre ce "formulaire" de manière asynchrone. Par rapport à l'ajax ordinaire, le plus grand avantage de l'utilisation de FormData est que nous pouvons télécharger un fichier binaire de manière asynchrone

Les versions plus récentes de tous les principaux navigateurs prennent déjà en charge ces objets, tels que. comme Chrome 7+, Firefox 4+, IE 10+, Opera 12+, Safari 5+.

Voir :

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData

Un seul formulaire transmis est affiché ici Comment initialiser FormData

<form enctype="multipart/form-data" method="post" name="fileinfo">
Copier après la connexion

Code Js

var oData = new FormData(document.forms.namedItem("fileinfo" )); 
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 uploading your file.<br \/>"; 
   } 
}; 
oReq.send(oData);
Copier après la connexion
Voir : https://developer.mozilla.org/zh-CN/docs/Web /Guide/Using_FormData_Objects

Utilisez FormData, effectuez des requêtes Ajax et téléchargez des fichiers

JQuery est utilisé ici, mais les anciennes versions de JQuery telles que 1.2 ne sont pas prises en charge. Il est préférable d'utiliser 2.0 ou une version plus récente. versions :

Code HTML

<form id= "uploadForm"> 
   <p >指定文件名: <input type="text" name="filename" value= ""/></p > 
   <p >上传文件: <input type="file" name="file"/></ p> 
   <input type="button" value="上传" onclick="doUpload()" /> 
</form>
Copier après la connexion

Code Js

function doUpload() { 
   var formData = new FormData($( "#uploadForm" )[0]); 
   $.ajax({ 
     url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' , 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function (returndata) { 
       alert(returndata); 
     }, 
     error: function (returndata) { 
       alert(returndata); 
     } 
   }); 
}
Copier après la connexion
Je crois que vous maîtrisez la méthode après En lisant le cas dans cet article, pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

js+ajaxcap exploite l'objet json et effectue une boucle vers la table pour enregistrer

Utilisez ajax pour vérifier utilisateurs enregistrés Si le nom existe

Le formulaire d'opération Ajax télécharge les fichiers de manière asynchrone

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal