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->
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.
Bitte klicken Sie unten auf die Schaltfläche Datei auswählen und dann klicken, um diese Demo zu erleben.
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 ('. Fortschritts-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.id) .find ('p.State'). text ('upload error');}); Uploader.on ('UploadComplete', Funktion (Datei) {$ ('#'+file.id) .find ('. Fortschritt'). fadeout ();}); Uploader.on ('UploadComplete', Funktion (Datei) {$ ('#'+file.id) .find ('. Fortschritt'). fadeout ();});Bild -Upload
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 ({// Überladen Sie nach Auswahl der Datei die Datei automatisch hoch, wob Sie die Datei automatisch hochladen. // Wählen Sie die Dateischaltfläche Optional.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 -Vorgang hochgeladen wird, ist das Upload erfolgreich, das Upload fehlgeschlagen und das Upload ist abgeschlossen, die UploadProgres-, Uploadsuccess-, UploadError- und UploadComplete -Ereignisse entsprechen jeweils den Ereignissen UploadProgress, UploadSuccess, UploadError und UploadComplete.
// 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 -Span'); // Vermeiden Sie die wiederholte Erstellung, wenn (! .Find ('span');} $ 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');}); // Datei -Upload 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 (! // Nach Abschluss des Uploads ist es erfolgreich oder fehlgeschlagen. Löschen Sie zuerst die Fortschrittsleiste. Uploader.on ('UploadComplete', Funktion (Datei) {$ ('#'+file.id) .find ('. Fortschritt'). remove ();});Das oben genannte ist das relevante Wissen, das Ihnen mit dem Web-Uploader zur Erzielung von Multi-File-Uploading eingeführt wird. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!