Téléchargez des fichiers via Ajax et utilisez FormData pour effectuer des requêtes Ajax-js tutoriel-php.cn

Téléchargez des fichiers via Ajax et utilisez FormData pour effectuer des requêtes Ajax

亚连

Libérer： 2018-05-23 15:41:35

original

1470 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur le téléchargement de fichiers via Ajax et l'utilisation de FormData pour effectuer des requêtes Ajax. Les amis dans le besoin peuvent se référer à

Téléchargement de 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 certains cas, nous ne souhaitons pas que la page soit actualisée. Dans ce cas, nous utilisons toujours Ajax. request :

Code Js

$.ajax({ 
   url : "http://localhost:8080/STS/rest/user", 
   type : "POST", 
   data : $( &#39;#postForm&#39;).serialize(), 
   success : function(data) { 
     $( &#39;#serverResponse&#39;).html(data); 
   }, 
   error : function(data) { 
     $( &#39;#serverResponse&#39;).html(data.status + " : " + data.statusText + " : " + data.responseText); 
   } 
});

Copier après la connexion

Comme ci-dessus, le formulaire peut être séquencé via $('#postForm').serialize(), transmettant ainsi tout 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.

À 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. faites-le de manière asynchrone. Soumettez ce "formulaire". 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 cet objet. Chrome 7+, Firefox 4+, IE 10+, Opera 12+, Safari 5+.

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

Voici une seule façon d'initialiser FormData via le formulaire

<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 pour effectuer des requêtes Ajax et télécharger des fichiers

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

<. 🎜>

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

Ce qui précède est ce que j'ai compilé pour vous, j'espère que ce sera le cas. utile pour vous à l'avenir.

function doUpload() { 
   var formData = new FormData($( "#uploadForm" )[0]); 
   $.ajax({ 
     url: &#39;http://localhost:8080/cfJAX_RS/rest/file/upload&#39; , 
     type: &#39;POST&#39;, 
     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