Wie implementiert man die Datei-Upload-Funktion mit Fortschrittsbalken in JavaScript?-js-Tutorial-php.cn

Wie implementiert man die Datei-Upload-Funktion mit Fortschrittsbalken in JavaScript?

WBOY

Freigeben： 2023-10-21 10:07:47

Original

760 Leute haben es durchsucht

JavaScript 如何实现带进度条的文件上传功能？

Wie implementiert man die Datei-Upload-Funktion mit Fortschrittsbalken in JavaScript?

In der modernen Webentwicklung ist das Hochladen von Dateien ein üblicher Vorgang. Um das Benutzererlebnis zu verbessern, ist es notwendig, eine Funktion zum Hochladen von Dateien mit einem Fortschrittsbalken hinzuzufügen. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die Funktion zum Hochladen von Dateien mit einem Fortschrittsbalken implementieren, und es werden spezifische Codebeispiele aufgeführt.

1. Front-End-Seitenlayout

Zunächst müssen wir ein Layout erstellen, das Dateiauswahlschaltflächen, Fortschrittsbalken und Upload-Schaltflächen auf der Front-End-Seite enthält.

<!DOCTYPE html>
<html>
<head>
    <title>带进度条的文件上传</title>
</head>
<body>
    <h1>带进度条的文件上传</h1>
    <input type="file" id="fileInput">
    <progress id="progressBar" value="0" max="100"></progress>
    <button onclick="uploadFile()">上传</button>
</body>
</html>

Nach dem Login kopieren

Im obigen Code verwenden wir das Element , um eine Dateiauswahlschaltfläche zu erstellen, das Element , um einen Fortschrittsbalken zu erstellen, und eine Schaltfläche, um den Upload-Vorgang auszulösen.

2. JavaScript implementiert die Upload-Funktion

Als nächstes implementieren wir JavaScript, um die Datei-Upload-Funktion zu implementieren und den Fortschrittsbalken während des Upload-Vorgangs in Echtzeit zu aktualisieren.

function uploadFile() {
    var fileInput = document.getElementById("fileInput");
    var file = fileInput.files[0];
    
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/upload", true);

    xhr.upload.addEventListener("progress", function(e) {
        if (e.lengthComputable) {
            var percentComplete = Math.round((e.loaded / e.total) * 100);
            var progressBar = document.getElementById("progressBar");
            progressBar.value = percentComplete;
        }
    }, false);

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log("上传完成");
        }
    };

    xhr.send(file);
}

Nach dem Login kopieren

Im obigen Code holen wir uns zuerst das Element der Dateiauswahlschaltfläche und holen uns die ausgewählte Datei. Anschließend erstellen wir ein XMLHttpRequest-Objekt und geben die URL für die POST-Anfrage an. Hier müssen Sie es entsprechend der tatsächlichen Situation in Ihre eigene Backend-Schnittstellenadresse ändern.

Als nächstes hören wir uns das Fortschrittsereignis während des Upload-Vorgangs an, berechnen den Upload-Prozentsatz und aktualisieren den Wert des Fortschrittsbalkens jedes Mal, wenn der Fortschritt aktualisiert wird.

Wenn sich der readyState der Anfrage auf 4 ändert (die Anfrage ist abgeschlossen) und der Status 200 ist (die Anfrage ist erfolgreich), können wir feststellen, dass der Datei-Upload abgeschlossen wurde.

3. Back-End-Verarbeitung des Datei-Uploads

Der obige Code verarbeitet nur die Datei-Upload-Logik im Front-End und die entsprechende Verarbeitung muss im Back-End erfolgen. Hier nehmen wir Node.js als Beispiel und verwenden das Express-Framework, um Datei-Upload-Anfragen zu verarbeiten und die Dateien auf dem Server zu speichern.

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), function (req, res, next) {
    // 文件上传成功后的处理逻辑
    console.log(req.file);
});

Nach dem Login kopieren

In diesem Code stellen wir zunächst die Express- und Multer-Module vor und verwenden die Multer-Middleware, um Datei-Upload-Anfragen zu verarbeiten. Multer konfiguriert das Zielverzeichnis für den Datei-Upload als „uploads/“ und verwendet upload.single('file'), um eine Datei mit dem Namen „file“ zu empfangen.

Nachdem die Datei erfolgreich hochgeladen wurde, können Sie das req.file-Objekt auf der Konsole ausdrucken. Dieses Objekt enthält relevante Informationen zur hochgeladenen Datei, wie z. B. Dateiname, Dateigröße usw.

4. Zusammenfassung

Durch das obige Codebeispiel haben wir erfolgreich eine Datei-Upload-Funktion mit einem Fortschrittsbalken implementiert. Im Frontend-Teil wird JavaScript verwendet, um das Fortschrittsereignis während des Upload-Vorgangs zu überwachen und den Wert des Fortschrittsbalkens in Echtzeit zu aktualisieren. Im Backend-Teil werden Datei-Upload-Anfragen über das Express-Framework und die Multer-Middleware verarbeitet und die Dateien auf dem Server gespeichert.

Wenn Sie es in tatsächlichen Projekten verwenden müssen, ändern Sie bitte den Code entsprechend der tatsächlichen Situation. Ich hoffe, dieser Artikel kann Ihnen bei der Implementierung einer schnellen und bequemen Datei-Upload-Funktion helfen.

Das obige ist der detaillierte Inhalt vonWie implementiert man die Datei-Upload-Funktion mit Fortschrittsbalken in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!