In diesem Artikel wird die Methode zum Hochladen mehrerer Dateien und die Begrenzung der Anzahl der Dateien in SWFUpload beschrieben. Teilen Sie es für Ihre Referenz wie folgt weiter:
SWFUpload ist eine Client -Datei -Upload -Komponente basierend auf Flash und JavaScript.
Handler.js Datei
Füllen Sie die Datei -Warteschlange aus (Filequeed) →
Vervollständigen Sie die Auswahl der Datei (fplEdialogComplete) → Hochladen (UploadStart) → Verarbeitung hochladen (UploadProgress) → Erfolg hochladen (UploadSuccess) → Abschluss hochladen (UploadComplete) →
Queuecomplete
Wie oben gezeigt, ist festzustellen, dass die obigen Rückruffunktionen mit einzelnen Auswahldateien nacheinander ausgeführt werden, dass mehrere Dateien ausgewählt werden. Filequeed und QueueComplete werden nur einmal ausgeführt, während ein FileDialogComplet ... → UploadComplete einmal pro Datei ausgeführt wird.
Nach Abschluss der grundlegenden Funktionen unter Bezugnahme auf das offizielle Beispiel verwendet Ganji eine Iframe -Methode.
Um die Grenze für die Anzahl der Vorschau der Miniaturansicht und die Anzahl der gelöschten und hochgeladenen Bilder zu erreichen
Zeigen Sie Miniaturansichten an, generieren Sie Schaltflächen, um Miniaturansichten zu löschen.
Instern zeigt Divs von Miniaturansichten für die übergeordnete Seite
src_s ist die generierte Miniaturansichtadresse
src_b ist die ursprüngliche Bildadresse
ServerData sind die Daten, die auf der Seite zur Bildaufladung von Bild -Upload zurückgegeben werden. Es wird im Erfolgsformat zurückgegeben | Miniaturansicht | Originaladresse | Originaladresse
Funktion uploadSuccess (Datei, serverData) {try {var ressing = serverData.split ('|'); if (result [0]! Progress.SetError (); progress.setStatus (serverData); Fortschritt.Togglecancel (Falsch); } else {var progress = new FileProgress (Datei, this.customSettings.ProgressTarget); progresor.setComplete (); progresor.setStatus ("vollständig"); Fortschritt.Togglecancel (Falsch); var img_url_s = result [1]; var img_url_b = result [2]; addImage (img_url_s, img_url_b); }} catch (ex) {this.debug (ex); }} Funktion addimage (src_s, src_b) {var newdiv = parent.document.createelement ("div"); newdiv.style.margin = "5px"; newdiv.style.height = "60px"; newdiv.style.width = "80px"; newdiv.style.border = "1px solide #7f9db9"; newdiv.style.cssfloat = "links"; newdiv.style.stylefloat = "links"; newdiv.style.position = "relativ"; var newa = parent.document.createelement ("a"); newa.classname = "delete"; newa.title = "delete"; newa.href = "javaScript ::"; newa.onclick = function () {deldiv (newdiv);}; var newInput_s = parent.document.createelement ("input"); newInput_s.type = "Hidden"; newInput_s.value = src_s; newInput_s.name = "image_s []"; Newa.AppendChild (newInput_s); var newInput_b = parent.document.createelement ("input"); NewInput_B.Type = "Hidden"; newInput_b.value = src_b; newInput_b.name = "image_b []"; Newa.AppendChild (newInput_B); var newimgdiv = parent.document.createelement ("div"); var newimg = parent.document.createelement ("img"); newimg.style.height = "60px"; newimg.style.width = "80px"; newimgdiv.appendchild (newimg); newdiv.appendchild (newimgdiv); Newdiv.AppendChild (Newa); parent.document.getElementById ("Thumbimages"). appendChild (newdiv); if (newimg.filters) {try {newimg.filters.Item ("DimaMagetransform.Microsoft.Alpha"). Opacity = 0; } catch (e) {// Wenn es anfänglich nicht festgelegt ist, wirft der Browser einen Fehler auf. Dies wird es festlegen, wenn es noch nicht festgelegt ist. newimg.style.filter = 'progid: dimaMagetransform.microsoft.Alpha (opacity =' + 0 + ')'; }} else {newimg.style.opacity = 0; } newimg.onload = function () {fadein (newimg, 0); }; newimg.src = src_s;} Funktion fadein (Element, Opazität) {var recordoPacityBy = 5; var rate = 30; // 15 fps if (opacity <100) {opacity += reclyopacityby; if (opacity> 100) {opacity = 100; } if (Element.Filters) {try {element.filters.Item ("DimaMagetRansform.Microsoft.Alpha"). opacity = opacity; } catch (e) {// Wenn es anfänglich nicht festgelegt ist, wirft der Browser einen Fehler auf. Dies wird es festlegen, wenn es noch nicht festgelegt ist. Element.Style.Filter = 'progid: dimaMagetransform.microsoft.Alpha (opacity =' + opacity + ')'; }} else {element.style.opacity = opacity / 100; }} if (opacity <100) {setTimeout (function () {fadein (Element, Opazität);}, rate); }}In Bezug auf die Verarbeitung der verbleibenden Anzahl hochgeladener Dateien
Funktion QueueComplete (numFileSuPloaded) {this.setButtDisabled (false); var stats = this.getStats (); var status = document.getElementById ("divstatus"); status.innerhtml = "hochgeladen" + stats.successful_Uploads + "Dateien, Sie können auch" + parseInt (this.Setings ['File_Upload_Limit']-stats.successFul_Uploads) + "Dateien"; // SWFU Siehe SWFU auf der iframe -Seite swfu = new SWFUpload (Einstellungen); var stats = swfu.getStats (); stats.successful_uploads--; SWFU.SetStats (Statistiken); var status = document.getElementById ("divstatus"); status.innerhtml = "hochgeladen" + stats.successful_uploads + "Eine Datei kann auch hochgeladen werden" + parseInt (swfu.Setings ['file_upload_limit']-Stats.SUCCESFUR_UPLOADS) + "Dateien";} Dateien;} Dateien;Dies kann an der Verwendung von Iframe zurückzuführen sein
SWFU in der Deldiv -Funktion kann dadurch nicht ersetzt werden
Der Gesamteffekt ist wie in der Abbildung dargestellt:
Nachdem Sie das Bild hochgeladen und die Informationen erneut geändert haben
Holen Sie sich den hochgeladenen Bildweg vom Hintergrund über PHP und geben Sie ihn einem JS -Array über Smarty an
var img_arr = new Array (); {if isSet ($ img_arr)} {Abschnittsname = 'img_arr' Loop = $ img_arr} img_arr [$ smarty.section.img_arr.index}] = new Array ('{$ img_arr [img_arr] .images_s}', '{$ img_arr [img_arr] .images_b}'); {/section} {/if}Fragen Sie das SWFUpload -Dokument ab, um die folgenden Informationen zu erhalten
FlashReady ()
Diese Ereignisfunktion ist ein internes Ereignis und kann nicht umgeschrieben werden. Dieses Ereignis wird ausgelöst, wenn die SWFUpload so instanziiert ist und der geladene Flash alle Initialisierungsvorgänge abschließt.
Erinnerung: swfUpload_loadd_handler in den entsprechenden Einstellungen
Setzen Sie also swfUpload_loadd_handler in SWFUpload -Einstellungen
swfUpload_loadd_handler: geladen,
Definieren Sie dann die geladene Funktion in Handlern.js
Funktion geladen () {if (img_arr.length! }}}Rufen Sie die Funktion addimageFromDB auf, um die Anzahl der hochgeladenen Bilder zu ändern und Miniaturansichten hochgeladener Bilder zu generieren
// Initialisieren Sie die hochgeladene Bildfunktion addimagefromdb (Src_s, src_b, swfu) {var stats = swfu.getStats (); stats.successful_uploads ++; SWFU.SetStats (Statistiken); var status = document.getElementById ("divstatus"); status.innerhtml = "Hochgeladen <font color = 'green'>" + stats.successful_uploads + "</font> zhang, du kannst auch <font color = 'rot'>" + parseInt (swfu.setings ['file_upload_limit']-stats.succccccccccccccccess 'uwaGhang'; Addimage (src_s, src_b);}Weitere Informationen zu javaScriptbezogenen Inhalten finden Sie in den Themen dieser Website: "Zusammenfassung der JavaScript -Switching -Effekte und -Techniken", "Zusammenfassung der Fähigkeiten der JavaScript -Suchalgorithmus", "Zusammenfassung der JavaScript -Animationseffekte und -Techniken", "Zusammenfassung von JavaScript -Fehler und Debugging -Techniken", Summary of Javacript -Daten und Algorith -Fähigkeiten "," Summary of Javacript Data Structures "," Summary of Javacript Data Structures "" "" "" "" "" "" "" "" "" " JavaScript -Traversalalgorithmen und -techniken "und" Zusammenfassung der Nutzung von JavaScript -Mathematischen Operationen "
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.