Wie lade ich Dateien mit JavaScript hoch und verfolge ihren Fortschritt?-js-Tutorial-php.cn

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

Linda Hamilton

Freigeben： 2024-11-10 04:38:02

Original

994 Leute haben es durchsucht

How to Upload Files with JavaScript and Track Their Progress?

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();

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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});

Nach dem Login kopieren

Ü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 + "%";
    }
});

Nach dem Login kopieren

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 + "%";
    }
});

Nach dem Login kopieren

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!