Das FormData-Objekt lädt Dateien hoch

<a href="http://www.php.cn/wiki/125.html" target="_blank">For</a>mDataObjekt kann mithilfe einer Reihe von Schlüssel-Wert-Paaren A simuliert werden Füllen Sie das Formular aus und verwenden Sie dann <a href="http://www.php.cn/wiki/1527.html" target="_blank">XML<code><a href="http://www.php.cn/wiki/1527.html" target="_blank">XML</a>HttpRequestHttpRequest, um dieses Formular zu senden ".

Detaillierte Anweisungen zur Verwendung des FormData-Objekts finden Sie auf der Mozilla Developer-Website. FormData

Der Dateiteil

Upload hat jedoch nur den unteren Teil Das Layer--Objekt sendet eine Upload-Anfrage. So übergeben Sie <a href="http://www.php.cn/wiki/1495.html" target="_blank">jQuery<code>XMLHttpRequest Code> <a href="http://www.php.cn/wiki/1495.html" target="_blank">jQuery</a>Was ist mit dem Hochladen? AjaxIn diesem Artikel erfahren Sie, wie Sie Dateien mithilfe der
jQueryObjekte hochladen. FormData

Verwenden der

Formularinitialisierung<form>Objektmethode zum Hochladen von DateienFormData

HTML. Code

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>

JavascriptCode

$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: new FormData($('#uploadForm')[0]),
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

Ein paar Punkte, die Sie hier beachten sollten:

• ist auf processData gesetzt. Da der false-Wert ein data-Objekt ist, müssen die Daten nicht verarbeitet werden FormData

  Tag

• <form>enctype="multipart/form-data" ist auf gesetzt und das Hochladen von Dateien erfordert kein Caching

  Das
-Objekt wird aus der
• -Form erstellt und das Attribut

  wurde deklariert. Es wird auf „false“ gesetzt, nachdem cachefalse auf den Server hochgeladen wurde Verwenden Sie den Abfrageparameternamen

  von
, um das Dateieingabe-Stream-Objekt zu erhalten, da
• in

  contentType deklariert wird, wenn es nicht mit der false-Form<form>FormDataVerwenden Sie das enctype="multipart/form-data"-Objekt, um Felder hinzuzufügen

HTML-Code

Hier gibt es auch kein -Tag. Es gibt kein file Attribut. <input>name="file"Javascript-Code

<form> Hier gibt es mehrere Unterschiede: Der zweite Parameter von FormData

FormData

sollte ein Dateiobjekt sein , d. h.

<p id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</p>

<form> sollte auch aus dem Code enctype="multipart/form-data" auf „false“ gesetzt werden. Sie können sehen, dass ein

-Tag nur

hochladen kann um das Attribut

oder

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

in

hinzuzufügen, um Dateien auf der Serverseite zu lesen

Ab <a href="http://www.php.cn/wiki%20/1516.html" target="_blank">Servlet<li> 3.0</li></a>, Sie können

oder append() Zwei $('#file')[0].files[0] Schnittstellen

übergeben, um hochgeladene Dateien zu erhalten. Hier gibt es nicht viel zu sagen. Weitere Informationen finden Sie im offiziellen Website-Tutorial zum Hochladen von Dateien mit Java-Servlet-Technologie und im Beispiel der Datei-Upload-Beispielanwendung

Das obige ist der detaillierte Inhalt vonDas FormData-Objekt lädt Dateien hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!