Laden Sie Dateien über Ajax hoch und verwenden Sie FormData, um Ajax-Anfragen zu stellen

In diesem Artikel werden hauptsächlich die relevanten Informationen zum Hochladen von Dateien über Ajax und zur Verwendung von FormData zum Stellen von Ajax-Anfragen vorgestellt. Freunde in Not können sich auf

Hochladen von Dateien über die herkömmliche Formularübermittlung beziehen:

Html-Code

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

Bei der herkömmlichen Formularübermittlung wird die Seite jedoch aktualisiert. In einigen Fällen möchten wir jedoch nicht, dass die Seite aktualisiert wird. In diesem Fall verwenden wir alle die Ajax-Request-Methode :

Js-Code

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

Wie oben kann das Formular über $('#postForm').serialize() serialisiert werden, sodass alle Parameter im Formular werden an den Server übergeben.

Bei der obigen Methode können jedoch nur allgemeine Parameter übergeben werden und der Dateistream der hochgeladenen Datei kann nicht serialisiert und übergeben werden.
Mittlerweile unterstützen gängige Browser jedoch ein Objekt namens FormData. Mit diesem FormData können wir Ajax problemlos zum Hochladen von Dateien verwenden.

Über FormData und seine Verwendung

Was ist FormData? Werfen wir einen Blick auf die Einführung zu Mozilla.

XMLHttpRequest Level 2 fügt eine neue Schnittstelle FormData hinzu, mit der wir einige Schlüssel-Wert-Paare verwenden können, um eine Reihe von Formularsteuerelementen über JavaScript zu simulieren Machen Sie es asynchron. Im Vergleich zu gewöhnlichem Ajax besteht der größte Vorteil der Verwendung von FormData darin, dass wir eine Binärdatei asynchron hochladen können.

Neuere Versionen aller gängigen Browser unterstützen dieses Objekt bereits Chrome 7+, Firefox 4+, IE 10+, Opera 12+, Safari 5+.

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

Hier gibt es nur eine Möglichkeit, FormData über das Formularformular zu initialisieren

<form enctype="multipart/form-data" method="post" name="fileinfo">

Js-Code

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

Siehe: https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

Verwenden Sie FormData, um Ajax-Anfragen zu stellen und Dateien hochzuladen

JQuery wird hier verwendet, aber ältere Versionen von JQuery wie 1.2 werden nicht unterstützt. Am besten verwenden Sie 2.0 oder neuere Versionen:

Html-Code

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

Js-Code

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So laden Sie Dateien mit jQuery Ajax hoch

Ajax verwenden, um asynchrone Aktualisierungsanforderungen zu implementieren

Ajax+php realisiert eine dreistufige Verknüpfung der Produktklassifizierung

Das obige ist der detaillierte Inhalt vonLaden Sie Dateien über Ajax hoch und verwenden Sie FormData, um Ajax-Anfragen zu stellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!