Hallo! Heute helfe ich dir, ein einfaches und bequemes System zum Hochladen von Dateien mit Fortschrittsanzeige in JavaScript zu erstellen. Diese Funktionalität ist nützlich, wenn der Benutzer große Dateien hochladen muss und es wichtig ist, den Fortschritt des Prozesses zu sehen.
Lassen Sie uns diesen Prozess Schritt für Schritt mit detaillierten Erklärungen zu jedem Schritt durchgehen.
Schritt 1. Erstellen Sie ein HTML-Formular zum Hochladen von Dateien
Zunächst müssen wir ein Formular erstellen, mit dem der Benutzer eine Datei zum Hochladen auswählen kann. In HTML geschieht dies mit dem Element <input> mit dem Typ file.
HTML-Vorlage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload with Progress</title>
</head>
<body>
<h1>Загрузка файла с прогрессом</h1>
<form id="uploadForm">
<input type="file" id="fileInput" name="file" />
<button type="submit">Загрузить файл</button>
</form>
<!-- Прогресс-бар -->
<progress id="progressBar" value="0" max="100" style="width: 100%;"></progress>
<!-- Результат -->
<div id="status"></div>
<script src="script.js"></script>
</body>
</html>
📋 Erläuterung:
Das Element
<input type="file">ermöglicht es dem Benutzer, eine Datei zum Herunterladen auszuwählen.Der Fortschrittsbalken
<progress>zeigt den Prozentsatz des Datei-Downloads an.Das Element
<div id="status">wird verwendet, um Nachrichten über den Status des Downloads (Erfolg oder Fehler) anzuzeigen.
Schritt 2. Hinzufügen eines Formularereignishandlers
Wenn der Benutzer eine Datei auswählt und auf die Schaltfläche "Hochladen" klickt, müssen wir dieses Ereignis abfangen und die Datei an den Server übertragen. Dazu fügen wir einen Formularhandler hinzu und heben sein Standardverhalten (Neuladen der Seite) auf.
Fügen Sie den Handler zu script.js hinzu:
document.getElementById('uploadForm').addEventListener('submit', function (event) {
event.preventDefault(); // Standardverhalten des Formulars aufheben
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (file) {
uploadFile(file); // Wir übergeben die Datei zum Hochladen an die Funktion
} else {
alert('Please select a file.');
}
});
🛑 Was passiert hier:
Wir hören die Veranstaltung
submitauf dem Formular.Wir heben das Standardverhalten beim Senden des Formulars auf.
Wir prüfen, ob der Benutzer eine Datei ausgewählt hat, und wenn ja, rufen wir die Funktion zum Laden der Datei
uploadFile()auf.
Schritt 3. Konfigurieren des Datei-Downloads mit XMLHttpRequest
Kommen wir nun zum Hauptteil - dem Hochladen einer Datei auf den Server mit Fortschrittsverfolgung. Dazu verwenden wir das Objekt XMLHttpRequest, mit dem wir Dateien senden und Informationen zum Fortschritt des Uploads erhalten können.
Implementierung der Funktion uploadFile:
function uploadFile(file) {
const xhr = new XMLHttpRequest(); // Wir erstellen ein neues XMLHttpRequest
const formData = new FormData(); // Wir verwenden FormData, um eine Datei zu senden
formData.append('file', file); // Wir fügen die Datei zum FormData-Objekt hinzu
// Handler zum Verfolgen des Ladefortschritts
xhr.upload.addEventListener('progress', function (event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
document.getElementById('progressBar').value = percentComplete; // Wir aktualisieren die Fortschrittsleiste
}
});
// Handler für den Fall eines erfolgreichen Downloads
xhr.addEventListener('load', function () {
if (xhr.status === 200) {
document.getElementById('status').textContent = 'File uploaded successfully!';
} else {
document.getElementById('status').textContent = 'Error loading file.';
}
});
// Fehlerbehandler
xhr.addEventListener('error', function () {
document.getElementById('status').textContent = 'An error occurred while uploading the file.';
});
xhr.open('POST', '/upload'); // Wir geben die Methode und URL zum Senden der Datei an
xhr.send(formData); // Wir senden die Daten
}
📦 Analyse der Arbeit:
Erstellung
XMLHttpRequest: Dieses Objekt ist für das Senden von HTTP-Anfragen zuständig.FormData: Wir verwendenFormDatazum Verpacken der Dateidaten, die an den Server gesendet werden.Fortschrittsverfolgung: Wir verwenden das Ereignis
progress, um die Anzahl der auf den Server hochgeladenen Bytes zu verfolgen und unseren Fortschrittsbalken zu aktualisieren.Verarbeitung des Abschlusses des Downloads: Wenn der Upload erfolgreich war (Status
200), zeigen wir eine Nachricht über den erfolgreichen Upload an, andernfalls zeigen wir eine Fehlermeldung an.Fehlerbehandlung: Wir verfolgen den Fehler während des Ladevorgangs und benachrichtigen den Benutzer im Falle eines Fehlers.
Schritt 4. Richten Sie den Server für die Dateiverarbeitung ein
Um unser Projekt abzuschließen, müssen wir einen Server einrichten, der die Datei empfängt. Als Beispiel können Sie einen Server auf Node.js mit der Bibliothek express und dem Paket multer verwenden, das bei der Verarbeitung von hochgeladenen Dateien hilft.
Beispiel für einen Server auf Node.js:
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' }); // Geben Sie den Ordner zum Hochladen von Dateien an
// Pfad zum Hochladen der Datei
app.post('/upload', upload.single('file'), (req, res) => {
if (!req.file) {
return res.status(400).send('File was not uploaded.');
}
res.send('File uploaded successfully!');
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
🌍 Erläuterung:
Wir verwenden die Bibliothek
multerzum Verarbeiten von hochgeladenen Dateien.Der Server akzeptiert die Datei, lädt sie in den angegebenen Ordner (
uploads/) und gibt die Antwort an den Client zurück.
Schritt 5. Testen
Nachdem wir nun sowohl die Client- als auch die Serverseite eingerichtet haben, können wir den Datei-Upload testen. Starte den Server, öffne die Seite mit dem Upload-Formular, wähle eine Datei aus und du wirst sehen, wie sich der Fortschrittsbalken füllt, während die Datei hochgeladen wird.
Befund
Das Hochladen einer Datei mit einem Fortschrittsbalken ist eine großartige Möglichkeit, die Benutzeroberfläche zu verbessern, insbesondere bei der Arbeit mit großen Dateien. Der Benutzer sieht, wie der Prozess voranschreitet, was seine Interaktion mit der Anwendung verständlicher und transparenter macht.
Wenn du Fragen hast oder zusätzliche Funktionen wie die Unterstützung mehrerer Dateien oder die Anzeige der verbleibenden Zeit hinzufügen möchtest, lass es uns wissen! 👨💻