Wie lade ich Dateien mit JavaScript hoch und verfolge ihren Fortschritt?

Dateien mit JavaScript hochladen

Um eine über ein Eingabeelement ausgewählte Datei hochzuladen, können Sie das FormData-Objekt verwenden. So geht's:

1. Erstellen Sie ein FormData-Objekt:

let formData = new FormData();

2. Hängen Sie die Datei an die FormData an:

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

3. Senden Sie die Daten an den Server:

Mit der Abruf-API können Sie die FormData an die angegebene URL senden:

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

Überwachen des Upload-Fortschritts

Um den Upload-Fortschritt zu überwachen, können Sie addEventListener() von EventTarget verwenden. Methode:

let progressBar = document.getElementById("progress-bar");

formData.addEventListener("progress", (event) => {
    if (event.lengthComputable) {
        let percentComplete = Math.round((event.loaded / event.total) * 100);
        progressBar.style.width = percentComplete + "%";
    }
});

Vollständiges Codebeispiel

Kombinieren des Datei-Uploads und der Fortschrittsverfolgung in einem einzigen Beispiel:

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

let progressBar = document.getElementById("progress-bar");

fetch('/upload/image', {method: "POST", body: formData})
.then((response) => {
    console.log(response);  // Handle server response
})
.catch((error) => {
    console.error(error);  // Handle upload failure
});

formData.addEventListener("progress", (event) => {
    if (event.lengthComputable) {
        let percentComplete = Math.round((event.loaded / event.total) * 100);
        progressBar.style.width = percentComplete + "%";
    }
});

Dieser Code wird Erstellen Sie eine POST-Anfrage an die URL „/upload/image“, senden Sie die Dateidaten und zeigen Sie den Upload-Fortschritt mithilfe eines Fortschrittsbalkens an.

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