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

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>

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

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">

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

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>

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

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!