Dateiübermittlung mit Formular und FormData.

1. ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e

Bevor wir mit den Anweisungen zur Dateiübermittlung fortfahren, überprüfen wir zunächst das Formular-Tag . form hat viele Attribute, hier erkläre ich nur die folgenden zwei Attribute:

1, method (enctype ist 'application / x-www-form-urlencoded')

In den meisten Fällen werden nur GET und POST verwendet.

①GET: Wenn Sie GET für die Formularübermittlung verwenden, verarbeitet der Benutzeragent (Browser) automatisch jede Eingabekomponente gemäß name=value (verwenden Sie encodeURIComponent für Name bzw. Wert). Codierung Verwenden Sie „=“, um die codierten Schlüssel-Wert-Paare zu verbinden, und verwenden Sie „&“, um mehrere Schlüssel-Wert-Paare zu verbinden), um eine Abfragezeichenfolge zu generieren, die am Ende der URL verbunden wird.

  ②POST: POST generiert auch eine Zeichenfolge, die mit GET identisch ist, aber diese Zeichenfolge wird geschrieben im HTTP-Anforderungsheader, anstatt am Ende der URL hinzugefügt zu werden.

Der Hauptunterschied zwischen den beiden ist:

GET hat eine Begrenzung der Größe der übermittelten Daten, normalerweise 2 KB Bei POST gibt es theoretisch keine Begrenzung (die tatsächliche Größe beträgt jedoch etwa 2 GB).

2. enctype

Wie oben erwähnt, ist der Standardwert des Formulars „application/x-www-form-urlencoded“, also enctype Einer von drei Werten. Lassen Sie uns diese drei Werte als nächstes im Detail besprechen.

①application/x-www-form-urlencode: Der Standardwert für die Formularübermittlung wurde oben besprochen und wird hier nicht wiederholt.

②text/plain: Bei Verwendung dieses Werts wird der Formularwert nicht codiert, sondern im Klartext an den Backend-Server übermittelt. Dieser Wert wird grundsätzlich nicht verwendet. Weil es beim Senden von Dateien keine gute Unterstützung für Binärdaten bieten kann.

③multipart/form-data: Wenn enctype diese Option verwendet, kodiert der Browser keine Zeichen, sondern: in Einheiten von Steuerelementen (Eingabe usw.) Teilen Sie es auf und fügen Sie es hinzu Inhaltsdisposition: Formulardaten, Name (Name, der der Eingabe entspricht), Dateiname (wenn eine Datei übermittelt wird, gibt es ein geändertes Feld) und Inhaltstyp (identisch mit dem vorherigen Feld, Übermittlungsdatei vorhanden): Datei Typ (leicht zu schmieden). Und fügen Sie auch eine Grenze hinzu (Trennzeichen, verschiedene Browser sind unterschiedlich und jede Einreichung ist anders)

Endlich diese Die Informationen werden zusammengefügt, in eine Nachricht kodiert und an den Server übermittelt werden (in Form von Binärdaten).

Es ist zu beachten, dass: Da der Hauptzweck das Hochladen von Dateien ist, gibt es bestimmte Anforderungen an die Upload-Größe, sodass die Methode nur als POST ausgewählt werden kann, wenn GET verwendet wird hochzuladen, dann wird nur ein gefälschter Pfad zur Datei übermittelt.

Diese Option muss beim Hochladen von Dateien verwendet werden. Nachdem Sie enctype auf „multipart/form-data“ eingestellt haben, können Sie Folgendes verwenden: ist ein Demo-Beispiel:

1. e4a2f546bbdf5a220d1fbd44f5a584a3  

2.   b3019dc6486ae21bacb9f9ad9a8b82a4  

3. 05a8e2e8b43546763f4f3866f88f925f

4. a5a24f5034bc7b1030fe80fa78d0a81b

Zusätzlich zur Verwendung von Formularformularen zum Senden von Dateien wird normalerweise mehr Ajax verwendet, ohne die Seite zu aktualisieren. Sehen wir uns an, wie man Ajax zum Senden von Dateien verwendet, ohne die Seite zu aktualisieren!

2. FormData

FormData ist eine von ES bereitgestellte API, die zur Implementierung der Ajax-Dateiübermittlung verwendet werden kann:

Schauen wir uns an, wie FormData verwendet wird:

var formData = new FormData(); //Um eine Instanz zu erstellen, können Sie Folgendes übergeben Dem Formular entsprechender DOM-Knoten. Als Parameter werden die Daten im Formular in der formData-Instanz gespeichert.

formData.append(name, value); //Verwenden Sie die Append-Methode und übergeben Sie den entsprechenden Schlüssel und Wert

// Andere Codes

Schließlich form Werfen Sie einfach die Instanz in xhr.send();.

xhr.send(formData);

var xhr = new XMLHttpRequest();
//使用FormData构造函数创建一个FormData的实例 
var formData = new FormData(); 
// formData.append('file0', oInput.value);
//注意，这里的value不是普通的表单value，而是一个file对象 
formData.append('file0', oInput.files[0]); 
xhr.open('POST', 'http://localhost:8080');  
xhr.onload = function(){  
  if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {  
    console.log(xhr.responseText);  
  }  
};
//form表单的默认值为①，而FormData的默认值为multipart/form-data,所以不用画蛇添足的去修改请求头  
//xhr.setRequestHeader(&#39;Content-Type&#39;, &#39;multipart/form-data&#39;);
xhr.send(formData);

Wie oben erwähnt, ist der an append übergebene Wert kein gewöhnlicher Eingabewert, sondern ein Dateiobjekt. Das Wissen über das Dateiobjekt ist durch den Speicherplatz begrenzt. Wenn Sie interessiert sind, können Sie es selbst durchsuchen.

Darüber hinaus handelt es sich bei der Funktionsweise von Dateien nicht nur um die allgemeine Funktionsweise kleiner Dateien, sondern auch um die Funktionsweise großer Dateien wie Videos von Video-Websites. Es reicht nicht aus, diese zu verstehen diese Aufgaben. Lernen Sie außerdem die relevanten APIs kennen und verfügen Sie über ein tiefes Verständnis für Blob-Objekte. Sie können selbst hingehen und es selbst lernen. Eine Zusammenfassung dieses Aspekts werde ich später veröffentlichen.

In diesem Artikel wird der Inhalt im Zusammenhang mit der Dateiübermittlung mithilfe von Formularen und FormData erläutert. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

DOM-Operation in JQuery - Wrap

Django verwendet eine Anfrage, um die vom Browser gesendeten Parameter abzurufen

Einige Gedanken zu React this binding

Das obige ist der detaillierte Inhalt vonDateiübermittlung mit Formular und FormData.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!