Die WebuLader -Datei -Upload -Komponente kann die Vorteile von HTML5 in modernen Browsern vollständig nutzen, während der Mainstream -IE -Browser nicht mit der ursprünglichen Flash -Laufzeit aufgibt und mit IE6+, iOS 6+, Android 4+ kompatibel ist. Die beiden Laufzeitsätze, dieselbe Anrufmethode kann nach Belieben von Benutzern ausgewählt werden. Die Verwendung einer großen Dateifragmentierung gleichzeitig das Hochladen verbessert erheblich die Effizienz des Datei -Hochladens.
1. Funktion Einführung
Sharding, Parallelität
Sharding und Parallelität kombinieren zusammen, um eine große Datei in mehrere Blöcke zu unterteilen und gleichzeitig hochzuladen, wodurch die Upload -Geschwindigkeit großer Dateien erheblich verbessert wird.
Wenn Netzwerkprobleme Übertragungsfehler verursachen, müssen Sie nur den Fehler Shard und nicht die gesamte Datei übertragen. Darüber hinaus kann das Shard -Getriebe in Echtzeit den Fortschritt mehr hochladen.
Vorschau, Komprimierung
Unterstützt gemeinsame Bildformate JPG, JPEG, GIF, BMP, PNG -Vorschau und Komprimierung, um Netzwerkdatenübertragung zu sparen.
Analysieren Sie die Meta -Informationen in JPEG und behandeln Sie verschiedene Orientierungen korrekt. Gleichzeitig, nach Komprimierung, laden Sie alle ursprünglichen Meta -Daten des Bildes hoch und behalten Sie sie auf.
Fügen Sie Dateien über mehrere Kanäle hinzu
Unterstützt mehrere Dateiauswahl, Typfilterung, Drag & Drop (Datei & Ordner) und Bildeinfunktionen.
Die Einfügenfunktion spiegelt sich hauptsächlich darin wider, dass bei Bilddaten in der Zwischenablage (Screenshot-Tools wie QQ (Strg + Alt + A) auf das Bild auf der Webseite klicken und auf das Kopieren klicken können).
HTML5 & Flash
Kompatibel mit Mainstream -Browsern, konsistenten Schnittstellen und implementieren zwei Sätze von Laufzeitunterstützung, sodass Benutzer sich nicht darum kümmern müssen, welche Kernel intern verwendet werden.
Gleichzeitig erledigt der Flash-Teil keine Arbeiten im Zusammenhang mit der Benutzeroberfläche, was für Benutzer, die sich nicht um die Erweiterung und die individuellen Geschäftsanforderungen von Flash interessieren, geeignet sind.
MD5 Sekunden Pass
Wenn die Dateigröße groß ist und die Menge relativ groß ist, unterstützt sie vor dem Hochladen die MD5 -Wertverifizierung der Datei. Wenn es konsistent ist, können Sie es direkt überspringen.
Wenn der Server und das Front-End den Algorithmus gleichmäßig ändern und Segment MD5 einnehmen, kann er die Überprüfungsleistung erheblich verbessern und etwa 20 ms dauern.
Leicht zu erweitern und abnehmbar
Der abnehmbare Mechanismus wird angewendet, um die Funktionen in Widgets zu trennen, und kann frei übereinstimmen.
Der Code wird unter Verwendung von AMD -Spezifikationen organisiert, was klar und klar ist, wodurch es für erweiterte Spieler geeignet ist.
Ressourcen einführen
Das Hochladen von Dateien mit dem Web -Uploader erfordert die Einführung von drei Ressourcen: JS, CSS und SWF.
<!-CSS einführen-> <link rel = "stylesheet" type = "text/csS" href = "WebuLader Ordner/WebuPloader.css"> <!-Einführung jS-> <script type = "text/javascript" später angezeigt->
2. Datei -Upload
WebuLader enthält nur die zugrunde liegende Implementierung von Datei -Uploads und enthält nicht den UI -Teil. Daher können Sie die interaktiven Aspekte frei spielen. Im Folgenden wird zeigen, wie eine einfache Version implementiert wird.
HTML -Teil
Bereiten Sie zunächst die DOM -Struktur mit drei Teilen vor: Container, die Dateiinformationen, Auswahlschaltflächen und Hochladen von Schaltflächen speichern.
<div id = "uploader"> <!-Wird verwendet, um Dateiinformationen zu speichern-> <div id = "thelist"> </div> <div> <div id = "picker"> Datei auswählen </div> <button id = "ctlbtn"> upload </button> </div> </div>
Initialisieren Sie den Web -Uploader
Weitere Informationen finden Sie im Kommentarbereich im Code.
var uploader = webuLloader.create ({// SWF -Dateipfad SWF: Base_url + '/js/uploader.swf', // Dateiempfangsserver. Server: 'http://webuloader Flash.Benutzerauswahl anzeigen
Da der WebuPlader keine UI -Logik behandelt, müssen Sie das Dateinometer -Ereignis anhören, um es zu implementieren.
// Wenn eine Datei zum Queue uploader.on ('FilequeUed', Funktion (Datei) {$ list.append ('<div id = " + Datei.id +'"> ' +' <H4> ' + Datei +' </H4> ' +' <p> Warte auf Upload ... </p> ' +' </div> ') hinzugefügt.Datei -Upload -Fortschritt
Wenn die Datei hochgeladen wird, sendet der Web -Uploader ein UploadProgress -Ereignis, das das Dateiobjekt und den aktuellen Upload -Fortschritt der Datei enthält.
// Erstellen Sie eine Fortschrittsleiste, die Sie während des Hochladens in Echtzeit in Echtzeit anzeigen können. Uploader.on ('UploadProgress', Funktion (Datei, Prozentsatz) {var $ li = $ ('#' + file.id), $ Prozent = $ li.find ('. Progress .Progress-bar'); // Vermeiden Sie die wiederholte Erstellung von if (! $ prozent.length) {$ prozent = $ ('<div> +' + '<divding = "$". '</div>'). appendTo ($ li) .Find ('. Progress-Bar');Erfolgs Erfolg und Fehlerverarbeitung
Wenn das Datei -Upload fehlschlägt, wird das UploadError -Ereignis gesendet, und wenn die Datei erfolgreich hochgeladen wird, wird das Uploadsuccess -Ereignis gesendet. Unabhängig von Erfolg oder Misserfolg wird das UploadComplete -Ereignis nach dem Hochladen der Datei ausgelöst.
Uploader.on ('UploadSuccess', Funktion (Datei) {$ ('#'+file.id) .find ('p.State'). text ('hochgeladen');}); Uploader.on ('UploadError', Funktion (Datei) {$ '#'+file). 'uploadComplete', Funktion (Datei) {$ ('#'+file.id) .find ('. Fortschritt'). fadeout ();});3. Laden Sie Bilder hoch
Im Vergleich zu normalen Dateien -Uploads zeigt diese Demo: Dateifilterung, Bildvorschau, Bildkomprimierung und andere Funktionen.
Html
Um die Demo wie oben zu implementieren, müssen Sie zunächst eine Schaltfläche und einen Container vorbereiten, um die Liste der hinzugefügten Dateiinformationen zu speichern.
<!-DOM-Struktur-Teil-> <div id = "Uploader-Demo"> <!-Wird verwendet, um Element zu speichern-> <div id = "filelist"> </div> <div id = "filePicker"> Bilder auswählen </div> </div>
JavaScript
Erstellen Sie eine Web -Uploaderinstanz
// Webuloader.create ({// Ob Sie die Datei automatisch hochladen) initialisieren uploadvar uploader = webuloader.create. Wählen Sie die Dateischaltfläche.Hören Sie sich das Dateineignis an und erstellen Sie eine Bildvorschau über uploader.makethumb.
PS: Was Sie hier erhalten, sind Daten -URL -Daten, und IE6 und IE7 unterstützen keine direkte Vorschau. Die Vorschau kann mit Flash oder dem Server abgeschlossen werden.
// Wenn eine Datei hinzugefügt wird, Uploader.on ('FilequeUed', Funktion (Datei) {var $ li = $ ('<div id = "' + file.id + '">' + '<img>' + '<div>' + Datei.Name + '</div>' + '</div>'), $ img = $ li.find ('IMg'; $ li) // Erstellen Sie Vorschaubild // Wenn es sich um eine Nicht-Image-Datei handelt, müssen Sie diese Methode nicht aufrufen. 'src', src);Dann ist der Rest die Upload -Statusaufforderung. Wenn der Datei -Upload -Prozess hochgeladen wird, ist das Upload erfolgreich, das Upload fehlgeschlagen und das Upload ist abgeschlossen. Die UploadProgres-, Uploadsuccess-, UploadError- und UploadComplete -Ereignisse entsprechen den UploadProgresse, UploadSuccess, UploadError bzw. UploadComplete -Ereignissen.
// Erstellen Sie eine Fortschrittsleiste, die Sie während des Hochladens in Echtzeit in Echtzeit anzeigen können. Uploader.on ('UploadProgress', Funktion (Datei, Prozentsatz) {var $ li = $ ('#'+file.id), $ Prozent = $ li.find ('. Fortschrittsspan'); // Vermeiden Sie eine wiederholte Erstellung, wenn (! $ Prozent.css ('Breite', Prozentsatz * 100 + '%');}); // Die Datei wird erfolgreich hochgeladen, dem Element eine erfolgreiche Klasse hinzufügen und das Upload mit Stil markieren. Uploader.on ('UploadSuccess', Funktion (Datei) {$ ('#'+file.id) .AddClass ('Upload-State-done');}); // Das Upload der Datei fehlgeschlagen und ein Upload-Fehler wurde angezeigt. Uploader.on ('UploadError', Funktion (Datei) {var $ li = $ ('#'+file.id), $ error = $ li.find ('div.Error'); // Vermeiden Sie eine wiederholte Erstellung, wenn (! Das Upload ist abgeschlossen, es ist erfolgreich oder fehlgeschlagen, löschen Sie zuerst die Fortschrittsleiste. Uploader.on ('UploadComplete', Funktion (Datei) {$ ('#'+file.id) .find ('. Fortschritt'). remove ();});Das obige ist eine Einführung in die Verwendung des Upload-Plug-Ins des Web-Uploader-Datei. Ich hoffe, es wird für das Lernen aller hilfreich sein.