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

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>

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 : $( '#postForm').serialize(), 
   success : function(data) { 
     $( '#serverResponse').html(data); 
   }, 
   error : function(data) { 
     $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText); 
   } 
});

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

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

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

Articles connexes :

Comment télécharger des fichiers à l'aide de jQuery Ajax

Utiliser ajax pour implémenter des demandes d'actualisation asynchrones

Ajax+php réalise une liaison à trois niveaux de classification des produits

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!