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!