Verwenden von FormData zum Hochladen von Dateien mit Ajax

Dieses Mal werde ich Ihnen die Verwendung von FormData zum Hochladen von Dateien mit Ajax vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von FormData zum Hochladen von Dateien mit Ajax?

Dateien über die herkömmliche Formularübermittlung hochladen:

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>

Die herkömmliche Formularübermittlung führt jedoch dazu, dass die Seite aktualisiert wird, jedoch in In einigen Fällen möchten wir nicht, dass die Seite aktualisiert wird. In diesem Fall verwenden wir alle Ajax, um Anfragen zu stellen:

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

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

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 verwendenmit Ajax.

Ü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 ()-Methode zum asynchronen Senden dieses „Formulars“. 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 diese Objekte bereits wie Chrome 7+, Firefox 4+, IE 10+, Opera 12+, Safari 5+.

Siehe:

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

Es wird nur ein von übergebenes Formular angezeigt hier So initialisieren Sie FormData

<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, stellen Sie Ajax-Anfragen und laden Sie Dateien hoch

JQuery wird hier verwendet, ältere Versionen von JQuery wie 1.2 werden jedoch nicht unterstützt. Am besten verwenden Sie 2.0 oder neuer 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); 
     } 
   }); 
}

Ich glaube, Sie haben die Methode danach gemeistert Lesen Sie den Fall in diesem Artikel. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

js+ajaxcap betreibt das JSON-Objekt und führt eine Schleife zur Tabelle durch, um es zu speichern

Verwenden Sie Ajax zur Überprüfung Registrierte Benutzer Ob der Name existiert

Ajax-Operationsformular lädt Dateien asynchron hoch

Das obige ist der detaillierte Inhalt vonVerwenden von FormData zum Hochladen von Dateien mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!