jQuery verwendet FormData, um das Hochladen von Dateien zu implementieren

Vorwort

Wir führen jQuery für asynchrones Hochladen ein, um eine bessere Benutzererfahrung zu erzielen. Einerseits sind asynchrone Vorgänge in JavaScript flexibler als Formulare, andererseits vermeiden asynchrone Uploads auch langfristige Seiteneinfrierungen beim Hochladen großer Dateien.

HTML

Eine ermöglicht es Benutzern, Dateien zu durchsuchen und auszuwählen. Das Folgende ist einfach Formular:

<form>
 <input type="file" id="avatar" name="avatar">
 <button type="button">保存</button>
</form>

Aber warum kann ich nur eine Datei auswählen? ? Fügen Sie ein Mehrfachattribut zu hinzu, um Mehrfachauswahlen zu ermöglichen!

<input type="file" id="avatar" name="avatar" multiple>

Rufen Sie die Dateiliste ab

Die obige hat ein DOM-Attribut namens files, das die ausgewählte Datei enthält Liste (Array).

$('button').click(function(){
 var $input = $('#avatar');
 // 相当于： $input[0].files, $input.get(0).files
 var files = $input.prop('files');
 console.log(files);
});

Jedes Element in diesem Array ist ein Dateiobjekt, das die folgenden Hauptattribute hat:

Name: Dateiname, gelesen -only-String, enthält keine Pfadinformationen.

Größe: Dateigröße, Einheit ist Bytes, schreibgeschützter 64-Bit-Ganzzahltyp

Typ: MIME-Typ , schreibgeschützter String, wenn der Typ unbekannt ist, wird ein leerer String zurückgegeben

Weitere Informationen finden Sie unter: https://developer.mozilla.org/zh-CN/docs/. Using_files_from_web_applications

multipart/form-data

Das Hochladen von Dateien ist etwas Besonderes. Sein Inhalt sind Binärdaten, während HTTP ein textbasiertes Kommunikationsprotokoll bereitstellt. In diesem Fall ist ein multipart/form-data-kodiertes HTTP-Formular erforderlich.

Das HTTP-Nachrichtentextformat ist wie folgt:

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="title"
 
harttle
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="avatar"; filename="harttle.png"
Content-Type: image/png
 
 ... content of harttle.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

Jedes Feld ist durch eine Begrenzungszeichenfolge getrennt, und der Browser garantiert dies Die Grenzzeichenfolge dupliziert den Inhalt nicht, sodass Multipart/Form-Daten Binärdaten erfolgreich codieren können.

jQuery-Upload-Datei

Dies ist das von XMLHttpRequest Level 2 bereitgestellte FormData-Objekt, das uns bei der Multipart-/Formdatenkodierung von Binärdateien helfen kann:

$('button').click(function(){
 var files = $('#avatar').prop('files');
 
 var data = new FormData();
 data.append('avatar', files[0]);
 
 $.ajax({
  url: '/api/upload',
  type: 'POST',
  data: data,
  cache: false,
  processData: false,
  contentType: false
 });
});

URL, Typ, Daten müssen den Front-End-Leuten bekannt sein. Lassen Sie uns die verbleibenden drei Parameter vorstellen:

Cache

Cache auf false setzen Deaktivieren Sie den Browser. Ein Cache dieser URL (und der entsprechenden HTTP-Methode). jQuery tut dies, indem es der URL einen redundanten Parameter hinzufügt.

Diese Methode funktioniert nur für GET und HEAD. IE8 speichert jedoch die vorherigen GET-Ergebnisse zwischen, um auf die POST-Anfrage zu antworten. Die Einstellung „cache: false“ dient hier der Kompatibilität mit IE8.

Referenz: http://api.jquery.com/jquery.ajax/

contentType

Der Standardwert des Inhaltstyps in jQuery ist application/ x-www-form-urlencoded, sodass das an den Datenparameter übergebene Objekt standardmäßig in eine Abfragezeichenfolge konvertiert wird (siehe HTTP-Formularkodierungs-Enctype).

Für diese Konvertierung benötigen wir jQuery nicht, da sonst das Codierungsformat von Multipart/Form-Daten zerstört wird. Legen Sie daher contentType: false fest, um den Konvertierungsvorgang von jQuery zu deaktivieren.

processData

jQuery konvertiert das Datenobjekt in eine Zeichenfolge, um eine HTTP-Anfrage zu senden. Standardmäßig wird die Kodierung application/x-www-form-urlencoded für die Konvertierung verwendet. Die Konvertierung schlägt fehl, nachdem wir „contentType: false“ festgelegt haben. Legen Sie daher „processData: false“ fest, um den Konvertierungsprozess zu deaktivieren.

Bei den von uns bereitgestellten Daten handelt es sich um Daten, die mit FormData codiert wurden und für die String-Konvertierung kein jQuery erforderlich ist.

Kompatibilität und andere Optionen

Die in diesem Artikel vorgestellte jQuery-Datei-Upload-Methode basiert auf dem FormData-Objekt. Dies ist die XMLHttpRequest Level 2-Schnittstelle und erfordert IE 10+, Firefox 4.0+ , Chrome 7+, Safari 5+, Opera 12+

Das bedeutet, dass Sie für Browser niedrigerer Versionen nur das Formular zur direkten Formularübermittlung verwenden können, die Seite, die ein Formular mit großer Datei übermittelt, jedoch nicht antwortet Wenn Sie eine niedrigere Version des Browsers verwenden möchten, können Sie nur andere Methoden verwenden, um dieses Problem im Browser zu lösen, z. B. viele Flash-Plug-Ins, die mehrere Dateien und den Upload-Fortschritt unterstützen.