So laden Sie mit FormData auf einfache Weise einzelne oder mehrere Dateien hoch

In diesem Beitrag erfahren Sie mehr über die FormData-Oberfläche, die in modernen Webbrowsern als Teil der HTML5-Spezifikation verfügbar ist.

Wir werden Beispiele für die Verwendung von FormData mit Ajax, Angular 7, Ionic und React sehen.

Was ist FormData?

FormData ist einfach eine Datenstruktur, in der Schlüssel-Wert-Paare gespeichert werden können. Genau wie der Name schon sagt, ist es für das Speichern von Formulardaten konzipiert, dh Sie können es mit JavaScript verwenden, um ein Objekt zu erstellen, das einem HTML-Formular entspricht. Dies ist vor allem dann nützlich, wenn Sie Formulardaten an RESTful-API-Endpunkte senden müssen, um beispielsweise einzelne oder mehrere Dateien über die XMLHttpRequestSchnittstelle, die fetch()API oder Axios hochzuladen .

Sie können ein FormData-Objekt erstellen, indem Sie die FormData-Schnittstelle mithilfe des newOperators wie folgt instanziieren :

const formData = new FormData() 

Die formDataReferenz bezieht sich auf eine Instanz von FormData. Sie können viele Methoden für das Objekt aufrufen, um Datenpaare hinzuzufügen und damit zu arbeiten. Jedes Paar hat einen Schlüssel und einen Wert.

Dies sind die verfügbaren Methoden für FormData-Objekte:

  • append(): Wird verwendet, um ein Schlüssel-Wert-Paar an das Objekt anzuhängen. Wenn der Schlüssel bereits vorhanden ist, wird der Wert an den ursprünglichen Wert für diesen Schlüssel angehängt.
  • delete(): wird verwendet, um ein Schlüssel-Wert-Paar zu löschen,
  • entries(): Gibt ein Iterator-Objekt zurück, mit dem Sie die Liste der Schlüsselwertpaare im Objekt durchlaufen können.
  • get(): Wird verwendet, um den Wert für einen Schlüssel zurückzugeben. Wenn mehrere Werte angehängt werden, wird der erste Wert zurückgegeben.
  • getAll(): Wird verwendet, um alle Werte für einen angegebenen Schlüssel zurückzugeben.
  • has(): Wird verwendet, um zu überprüfen, ob ein Schlüssel vorhanden ist.
  • keys(): Gibt ein Iterator-Objekt zurück, mit dem Sie die verfügbaren Schlüssel im Objekt auflisten können.
  • set(): Wird verwendet, um dem Objekt mit dem angegebenen Schlüssel einen Wert hinzuzufügen. Dadurch wird der Wert verschoben, wenn bereits ein Schlüssel vorhanden ist.
  • values(): Gibt ein Iterator-Objekt für die Werte des FormData-Objekts zurück.

Beispiel für das Hochladen von Dateien mit Vanilla JavaScript

Lassen Sie uns nun ein einfaches Beispiel für Datei - Upload mit Vanille JavaScript sehen, XMLHttpRequestund FormData.

Navigieren Sie zu Ihrem Arbeitsordner und erstellen und index.htmlarchivieren Sie den folgenden Inhalt:

   Parcel Sandbox 

Wir erstellen einfach ein HTML-Dokument mit einem durch die appID identifizierten . Als nächstes fügen wir die index.jsDatei mit einem Tag ein.

Erstellen Sie als Nächstes die index.jsDatei und fügen Sie folgenden Code hinzu:

document.getElementById("app").innerHTML = ` 

File Upload & FormData Example

`; const fileInput = document.querySelector("#fileInput"); const uploadFile = file => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; formData.append("file", file); request.send(formData); }; fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files[0]); });

Wir fügen zuerst ein Element in unsere HTML-Seite ein. Dies wird verwendet, um die Datei auszuwählen, die wir hochladen möchten.

Als nächstes fragen wir mit der querySelector()Methode nach dem Dateieingabeelement .

Als Nächstes definieren wir die uploadFile()Methode, mit der wir zuerst eine API_ENDPOINTVariable deklarieren   , die die Adresse unseres Endpunkts zum Hochladen von Dateien enthält. Als nächstes erstellen wir eine XMLHttpRequestAnfrage und ein leeres FormDataObjekt.

Wir verwenden die Append-Methode von FormData, um die Datei, die als Parameter an die uploadFile()Methode übergeben wurde, an den fileSchlüssel anzuhängen . Dadurch wird ein Schlüssel-Wert-Paar mit fileeinem Schlüssel und dem Inhalt der übergebenen Datei als Wert erstellt.

Als nächstes senden wir die Anfrage mit der send()Methode von XMLHttpRequestund übergeben das FormDataObjekt als Argument.

Nach dem Definieren der uploadFile()Methode warten wir auf das Änderungsereignis für das Element und rufen die   uploadFile()Methode mit der ausgewählten Datei als Argument auf. Auf die Datei wird vom event.target.filesArray aus zugegriffen .

Sie können mit diesem Beispiel in dieser Code-Sandbox experimentieren:

Mehrere Dateien hochladen

Sie können den obigen Code leicht ändern, um das Hochladen mehrerer Dateien zu unterstützen.

Zuerst müssen Sie die multipleEigenschaft zum Element hinzufügen :

Jetzt können Sie mehrere Dateien von Ihrem Laufwerk auswählen.

Ändern Sie als Nächstes die uploadFile()Methode, um ein Array von Dateien als Argument zu akzeptieren, und durchlaufen Sie einfach das Array und hängen Sie die Dateien an das FormDataObjekt an:

const uploadFile = (files) => { console.log("Uploading file..."); const API_ENDPOINT = "//file.io"; const request = new XMLHttpRequest(); const formData = new FormData(); request.open("POST", API_ENDPOINT, true); request.onreadystatechange = () => { if (request.readyState === 4 && request.status === 200) { console.log(request.responseText); } }; for (let i = 0; i < files.length; i++) { formData.append(files[i].name, files[i]) } request.send(formData); }; 

Rufen Sie abschließend die Methode mit einem Array von Dateien als Argument auf:

fileInput.addEventListener("change", event => { const files = event.target.files; uploadFile(files); }); 

Als Nächstes können Sie in diesen erweiterten Tutorials FormDatanachlesen, wie Sie Angular, Ionic und React verwenden können:

  • So veröffentlichen Sie FormData mit Angular 7
  • React & Axios FormData
  • Upload mehrerer Dateien mit Ionic 4 & FormData