suchen

Heim >Web-Frontend >js-Tutorial >Wie implementiert man die Datei-Upload-Funktion mit Fortschrittsbalken in JavaScript?

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

WBOY
WBOYOriginal
2023-10-21 10:07:47737Durchsuche

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>

Im obigen Code verwenden wir das Element 3525558f8f338d4ea90ebf22e5cde2bc, um eine Dateiauswahlschaltfläche zu erstellen, das Element 6ecb87e5318a36c03c59e25d55f43372, 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);
}

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

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!

JavaScript 中间件 express 接口 JS 对象 事件 input
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie kann ich mit JavaScript den Hintergrundeffekt mit Farbverlauf der festen Navigationsleiste am unteren Rand der Webseite erzielen?Nächster Artikel：Wie kann ich mit JavaScript den Hintergrundeffekt mit Farbverlauf der festen Navigationsleiste am unteren Rand der Webseite erzielen?

In Verbindung stehende Artikel

Mehr sehen