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