So erstellen Sie grafische Dateien hochladen Fortschrittsbalken in HTML5 und JavaScript

Key Takeaways

• Das HTML5 -Fortschritts -Tag, das Attribute für den aktuellen Fortschrittswert und -wert nach Abschluss liefert, kann zum Erstellen einer grafischen Datei -Upload -Fortschrittsleiste verwendet werden, obwohl der Autor ein Standard -P -Tag für weitere Styling -Optionen verwendet hat.
• Die Fortschrittsleiste kann mit CSS gestylt werden, wobei die grüne Balken als Grafik doppelt so breit wie das Fortschrittselement erstellt wurde, und eine feste Farbe, die beim Erfolg des Uploads angewendet wird oder fehlschlägt.
• Die Fortschrittsleiste wird in JavaScript implementiert, indem die Funktion uploadFile (), eine Ereignishandlerfunktion „Fortschritt“ hinzugefügt wird, die die neue Hintergrundposition berechnet, und eine Klasse von „Erfolg“ oder „Fehler“ beim Abschluss des Uploads festgelegt wird.

In meinen vorherigen Beiträgen haben wir festgestellt, wie HTML5 -Datei Drag & Drop verwendet, Dateien mit JavaScript geöffnet und mit AJAX asynchron hochladen Dateien hochladen. Im letzten Teil dieser Serie behandeln wir den aufregendsten Teil des Prozesses: Grafische Fortschrittsbalken! Datei -Upload -Fortschrittsbalken bieten ein wesentliches Benutzer -Feedback, aber sie waren bekanntermaßen schwierig zu implementieren. Bis jetzt ist das. Sowohl Firefox als auch Chrome unterstützen das XMLHTTPREQUEST2 -Objekt, das einen Fortschrittsereignis -Handler bietet. Aber zuerst überlegen wir, wie unsere Fortschrittsleiste implementiert werden wird…

Das HTML5 -Fortschritts -Tag

Das neue Fortschritts -Tag bietet zwei Attribute:

• Wert: Der aktuelle Fortschrittswert
• max: Der Wert nach Abschluss

Das Tag wäre in dieser Demonstration ideal gewesen und obwohl es in Chrome unterstützt wurde, erschien es nur in Firefox 6. Außerdem bietet keiner der Browser viele Styling -Eigenschaften, sodass ich es zugunsten eines Standard -P -Tags fallen ließ. Dies wird als Kind an eine DIV angehängt mit dem ID "Fortschritt".

Styling der Fortschrittsleiste

Unser P -Tag zeigt den Dateinamen in einem ausrandeten Box mit einer Größe von 250px an:

#progress p
{
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
}

Für die grüne Balken selbst habe ich eine Grafik erstellt, die doppelt so breit war wie das Fortschrittselement (500px). Der linke 250px ist gefärbt und der rechte 250px ist transparent: Diese Grafik wird als Hintergrundbild für die Fortschrittsleiste verwendet und bei „x% 0“ positioniert, wobei x% den verbleibenden Anteil angibt (nicht abgeschlossen), d. H.

• Fortschritt beginnt mit „Hintergrundposition: 100% 0“, d. H. 100% verbleibend
• Fortschritt endet mit "Hintergrundposition: 0% 0", d. H. Nichts verbleibt
• „Hintergrundposition: 30% 0“ bedeutet, dass 70% abgeschlossen wurden:

Eine feste Farbe wird angewendet, indem eine Klasse festgelegt wird, wenn der Upload erfolgreich ist oder fehlschlägt:

#progress p
{
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
}

Implementierung der Fortschrittsleiste in JavaScript

Wir können jetzt unsere Funktion uploadFile () ändern. Wenn eine gültige JPG -Datei auftritt, fügen wir ein neues P -Tag an das Element #Progress hinzu und fügen den Dateinamen als Text hinzu:

#progress p.success
{
	background: #0c0 none 0 0 no-repeat;
}

#progress p.failed
{
	background: #c00 none 0 0 no-repeat;
}

Wir benötigen jetzt eine Ereignishandlerfunktion „Fortschritt“. Dies empfängt ein Objekt mit .LADEd und .Totale Eigenschaften - Eine kleine Mathematik ist erforderlich, um die neue Hintergrundzahlung zu berechnen:

// upload JPEG files
function UploadFile(file) {

	var xhr = new XMLHttpRequest();
	if (xhr.upload && file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
	
		// create progress bar
		var o = $id("progress");
		var progress = o.appendChild(document.createElement("p"));
		progress.appendChild(document.createTextNode("upload " + file.name));

Wenn Sie mit AJAX vertraut sind, werden Sie den Event -Handler von OnreadyStatechange erkennen. Dies bestimmt, wann das Upload abgeschlossen ist und die Fortschrittsleiste entsprechend stilft (legt eine Klasse von „Erfolg“ fest, wenn der Upload erfolgreich war):

		// progress bar
		xhr.upload.addEventListener("progress", function(e) {
			var pc = parseInt(100 - (e.loaded / e.total * 100));
			progress.style.backgroundPosition = pc + "% 0";
		}, false);

Schließlich senden wir die Datei wie zuvor an unseren PHP -Server:

		// file received/failed
		xhr.onreadystatechange = function(e) {
			if (xhr.readyState == 4) {
				progress.className = (xhr.status == 200 ? "success" : "failure");
			}
		};

Wir haben endlich eine Lösung, die:

1. Ermöglicht das Ziehen und Ablegen von Dateien auf ein Webseitenelement
2. Analysen und Zeigt fallengelassene Dateien auf dem Client
an
3. Asynchron lädt Dateien auf den Server
hoch
zeigt eine grafische Fortschrittsleiste während des Uploads
verwendet progressive Verbesserung, um die meisten Browser
6. zu unterstützen
wird codiert, ohne eine JavaScript -Bibliothek zu benötigen.

Bitte betrachten Sie die Demonstrationsseite. Beachten Sie jedoch, dass dies auf einem Server ohne PHP gehostet wird, sodass Datei -Uploads nicht auftreten. Um es zu testen, laden Sie die Dateien bitte herunter, um den Code zu untersuchen und auf Ihrem eigenen Server zu hosten. Ich hoffe, Sie haben diese Serie genossen und überlegen, wie Datei Drag and Drop Ihrer Webanwendung helfen könnte. Wenn Sie diesen Beitrag genossen haben, werden Sie Lernable lieben. Der Ort, um frische Fähigkeiten und Techniken von den Meistern zu erlernen. Mitglieder erhalten sofortigen Zugriff auf alle E -Books und interaktiven Online -Kurse von SitePoint, z. B. Lernen HTML5.

häufig gestellte Fragen (FAQs) zu HTML5 JavaScript -Datei Upload Progress -Leiste

Wie kann ich das Erscheinungsbild der Fortschrittsleiste anpassen? Sie können die Farbe, Höhe, Breite und sogar die Form der Fortschrittsbalken ändern. Um beispielsweise die Farbe zu ändern, können Sie die Eigenschaft „Hintergrundfarbe“ verwenden. Sie können auch das Grundstück „Grenze-Radius“ verwenden, um die Fortschrittsleiste kreisförmig oder abgerundet zu machen. Denken Sie daran, die richtige Klasse oder ID in Ihrem CSS abzurichten, um diese Änderungen auf die Fortschrittsleiste anzuwenden. Bar für mehrere Datei -Uploads. Sie müssen jedoch den JavaScript -Code ändern, um mehrere Dateien zu verarbeiten. Sie können das Attribut "Multiple" im Eingabetag verwenden, um die Auswahl mehrerer Dateien zu ermöglichen. In Ihrem JavaScript müssen Sie dann die Dateien durchlaufen und individuell hochladen, wodurch die Fortschrittsleiste für jede Datei aktualisiert wird.

Wie kann ich den Prozentsatz des Hochladens in der Fortschrittsleiste anzeigen? 'Event -Hörer. Sie können den Prozentsatz berechnen, indem Sie den geladenen Betrag durch den Gesamtbetrag dividieren und mit 100 multiplizieren. Dann setzen Sie diesen Wert als Textinhalt des Fortschrittsleistenelements. ? Ein häufiger Grund ist, dass der Hörer des „Fortschritts“ -Ergners nicht korrekt eingerichtet ist. Stellen Sie sicher, dass Sie den Ereignishörer dem richtigen Objekt hinzugefügt haben und dass der Ereignisname korrekt geschrieben ist. Überprüfen Sie auch, ob der Code im Ereignishörer die Wert- und Max -Attribute der Fortschrittsleiste korrekt aktualisiert. Ja, Sie können diese Fortschrittsleiste mit anderen Programmiersprachen wie PHP oder Python verwenden. Die Fortschrittsleiste wird mit HTML und JavaScript implementiert, die clientseitige Technologien sind und mit jeder serverseitigen Technologie interagieren können. Sie müssen die AJAX-Anforderung im JavaScript-Code ändern, um die Datei an Ihr serverseitiges Skript zu senden, und Ihr serverseitiges Skript muss die Datei-Upload verarbeiten und die Fortschrittsinformationen zurückgeben. Ich mache den Fortschrittsbalken reibungslos animieren? Fügen Sie dem Fortschrittsbalkenelement in Ihrem CSS eine "Übergangseigenschaft" hinzu, wobei die Eigenschaft zum Übergang (z. B. "Breite"), die Dauer des Übergangs und die Zeitfunktion (z. B. "linear", "Easy-In" angegeben wird , 'Easy-Out'). Dieses Ereignis wird abgefeuert, wenn während des Uploads ein Fehler auftritt. Im Ereignishörer können Sie dem Benutzer eine Fehlermeldung anzeigen und die Fortschrittsleiste zurücksetzen. Datei hochladen und die Fortschrittsleiste zurücksetzen. Um das Upload des Datei -Uploads zu stornieren, können Sie die Methode "abortieren" im XMLHTTPREquest -Objekt aufrufen. Um die Fortschrittsleiste zurückzusetzen, können Sie sein Wertattribut auf 0 festlegen. Vor dem Senden der AJAX -Anfrage. Sie können die Größe der Datei aus der Eigenschaft "Größe" des Dateiobjekts erhalten. Wenn sie Ihr Limit überschreitet, zeigen

Kann ich diese Fortschrittsleiste für andere Arten von AJAX -Anforderungen verwenden, nicht nur für Dateien -Uploads? Das Ereignis „Fortschritt“ wird für jede Art von AJAX -Anforderung entlassen, nicht nur für Dateien -Uploads. Sie müssen den JavaScript -Code ändern, um die entsprechende AJAX -Anforderung zu senden und die Fortschrittsleiste basierend auf dem Fortschritt der Anfrage zu aktualisieren.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie grafische Dateien hochladen Fortschrittsbalken in HTML5 und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!