Wie lade ich Dateien mit JavaScript hoch?

So laden Sie eine Datei mit JavaScript hoch

Um eine Datei mit JavaScript hochzuladen, können Sie die folgenden Schritte nutzen:

1. Formular verwenden Daten:

   • Erstellen Sie ein FormData-Objekt, um die Datei und zusätzliche Daten zu speichern.
   • Hängen Sie die Datei mit formData.append() an die Formulardaten an.

2. Erstellen Sie ein XHR Anfrage:

   • Erstellen Sie ein XMLHttpRequest (XHR)-Objekt.
   • Setzen Sie die Anfragemethode auf „POST“ und die URL auf den Upload-Endpunkt.
   • Legen Sie die Eigenschaft body des XHR-Objekts auf formData fest .

3. Auf Upload-Ereignisse lauschen:

   • Ereignis-Listener zum XHR-Objekt für Load, Progress und hinzufügen Fehlerereignisse.
   • In diesen Ereignishandlern können Sie den Upload-Status und verwalten Antwort.

Beispielcode:

const formData = new FormData();
const fileInput = document.getElementById('image-file');
const file = fileInput.files[0];

formData.append('photo', file);

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/image');
xhr.send(formData);

xhr.addEventListener('load', () => {
  // Handle successful upload
});

xhr.addEventListener('progress', (e) => {
  // Monitor upload progress
});

xhr.addEventListener('error', (e) => {
  // Handle upload errors
});

Reines JavaScript:

Wenn Sie reines JavaScript ohne XHR verwenden möchten, können Sie die Fetch-API mit FormData verwenden .

Beispiel:

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();

formData.append("photo", photo);
fetch('/upload/image', { method: "POST", body: formData });

Das obige ist der detaillierte Inhalt vonWie lade ich Dateien mit JavaScript hoch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!