Ich versuche, eine AJAX-Funktion zum Hochladen von Dateien in meinem Projekt zu implementieren. Ich benutze dafür jQuery; Mein Code sendet die Daten mit AJAX. Ich möchte auch einen Fortschrittsbalken für das Hochladen von Dateien implementieren. Wie kann ich das machen? Gibt es eine Möglichkeit zu berechnen, wie viel bereits hochgeladen wurde, damit ich den hochgeladenen Prozentsatz berechnen und einen Fortschrittsbalken erstellen kann?
jquery
file-upload
progress-bar
Eddard Stark
quelle
quelle
Antworten:
Hinweis: Diese Frage bezieht sich auf das jQuery-Formular-Plugin . Wenn Sie nach einer reinen jQuery-Lösung suchen, beginnen Sie hier . Es gibt keine allgemeine jQuery-Lösung für alle Browser. Sie müssen also ein Plugin verwenden. Ich verwende dropzone.js , die für ältere Browser einen einfachen Fallback bieten . Welches Plugin Sie bevorzugen, hängt von Ihren Anforderungen ab. Es gibt viele gute Vergleichspost da draußen.
Aus den Beispielen :
jQuery:
html:
Sie müssen den Fortschrittsbalken mit CSS formatieren ...
quelle
Ich habe dies nur mit jQuery gemacht:
quelle
fileuploaddata
?fileuploaddata
.Ich habe Folgendes in meinem Projekt verwendet. Sie können es auch versuchen.
quelle
Überprüfen Sie dies: http://hayageek.com/docs/jquery-upload-file.php Ich habe es versehentlich im Internet gefunden.
quelle
Wenn Sie jquery in Ihrem Projekt verwenden und den Upload-Mechanismus nicht von Grund auf neu implementieren möchten, können Sie https://github.com/blueimp/jQuery-File-Upload verwenden .
Sie haben eine sehr schöne API mit mehrfacher Dateiauswahl, Drag & Drop-Unterstützung, Fortschrittsbalken, Validierungs- und Vorschaubildern, domänenübergreifender Unterstützung, Chunked- und Resumable-Datei-Uploads. Und sie haben Beispielskripte für mehrere Serversprachen (Node, PHP, Python und Go).
Demo-URL: https://blueimp.github.io/jQuery-File-Upload/ .
quelle
Hier ist eine vollständigere jquery 1.11.x $ .ajax () -Verwendung:
quelle
Dies löste mein Problem
quelle
Kathirs Antwort ist großartig, da er dieses Problem nur mit jQuery löst. Ich wollte nur einige Ergänzungen zu seiner Antwort vornehmen, um seinen Code mit einem schönen HTML-Fortschrittsbalken zu bearbeiten:
Hier ist der HTML-Code des Fortschrittsbalkens. Ich habe Bootstrap 3 für das Fortschrittsbalkenelement verwendet:
quelle
JavaScript:
Stile:
quelle