Este artículo describe el método para cargar múltiples archivos y limitar el número de archivos en SWFUPLOAD. Compártelo para su referencia, como sigue:
SWFUPLOAD es un componente de carga de archivo de cliente basado en Flash y JavaScript.
archivo handlers.js
Complete la cola de archivos (filequeuel) →
Complete la selección del archivo (FileDialogComplete) → Inicio de carga (Subida de carga) → Procesamiento de carga (SubloadProgress) → Suciedad de carga (uploadSuccess) → Super Load Finalation (uploadComplete) →
quejuel
Como se muestra arriba, si las funciones de devolución de llamada anteriores se ejecutan en secuencia con archivos de selección única, debe tenerse en cuenta que se seleccionan varios archivos. FileQueue y QueueComplete solo se ejecutarán una vez, mientras que FileDialogComplet ... → → → up uploadComplete se ejecutará una vez por archivo.
Después de completar las funciones básicas con referencia al ejemplo oficial, la imitación Ganji adopta un método de iframe.
Para lograr el límite en el número de vista previa de miniatura y el número de imágenes eliminadas y cargadas
Mostrar miniaturas, generar botones para eliminar las miniaturas,
Thumbimages muestra divs de miniaturas para la página principal
src_s es la dirección de miniatura generada
src_b es la dirección de imagen original
ServerData son los datos devueltos por la página de procesamiento de carga de imágenes. Se devolverá en el formato de éxito | Dirección de miniatura | Dirección original | Dirección original
function uploadSuccess (archivo, serverdata) {try {var result = serverdata.split ('|'); if (resultado [0]! = 'Success') {var progreso = new FileProgress (archivo, this.customSettings.ProgressTarget); progress.setError (); Progress.SetStatus (ServerData); progress.togglecancel (falso); } else {var progreso = new FileProgress (archivo, this.customsettings.progressTarget); Progress.SetComplete (); progress.setStatus ("cargar completo"); progress.togglecancel (falso); var img_url_s = resultado [1]; var img_url_b = resultado [2]; addImage (img_url_s, img_url_b); }} catch (ex) {this.debug (ex); }} función 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 sólido #7f9db9"; newdiv.style.cssfloat = "izquierda"; newdiv.style.stylefloat = "izquierda"; newDiv.style.Position = "relativo"; var newa = parent.document.createElement ("a"); newA.ClassName = "Eliminar"; newa.title = "eliminar"; newa.href = "javascript ::"; newA.OnClick = function () {deldiv (newDiv);}; var newinput_s = parent.document.createElement ("entrada"); newInput_s.type = "Hidden"; newInput_s.value = src_s; newInput_s.name = "image_s []"; NewA.AppendChild (NewInput_S); var newInput_b = parent.document.createElement ("entrada"); 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 ("dximagetransform.microsoft.alpha"). Opacidad = 0; } Catch (e) {// Si no se establece inicialmente, el navegador arrojará un error. Esto lo establecerá si aún no está configurado. newimg.style.filter = 'progid: dximagetransform.microsoft.alpha (opacidad =' + 0 + ')'; }} else {newimg.style.opacity = 0; } newimg.Onload = function () {fadein (newimg, 0); }; newimg.src = src_s;} función fadein (elemento, opacidad) {var reducePacityBy = 5; tasa var = 30; // 15 fps if (opacidad <100) {opacidad += rededopacityby; if (opacidad> 100) {opacidad = 100; } if (element.filters) {try {element.filters.item ("dximagetransform.microsoft.alpha"). opacidad = opacidad; } Catch (e) {// Si no se establece inicialmente, el navegador arrojará un error. Esto lo establecerá si aún no está configurado. element.style.filter = 'progid: dximagetransform.microsoft.alpha (opacidad =' + opacidad + ')'; }} else {element.style.opacity = opacidad / 100; }} if (opacidad <100) {setTimeout (function () {fadein (elemento, opacidad);}, tasa); }}Con respecto al procesamiento del número restante de archivos cargados
function queueComplete (numFilesUploaded) {this.setButToDIseable (false); var stats = this.getstats (); estado var = document.getElementById ("DivStatus"); status.innerhtml = "uploaded" + stats.successful_uploads + ", también puede cargar" + parseInt (this.settings ['file_upload_limit']-stats.successfulfulfuleads) + "archivos";} deldiv (myDiv) {myDiv.parentnode.Rementild (myDiVEdild (myDiVEdild (myDIVECHILD (myDIVECHILD (myDIVECHILD (myDIVECHILD (myDIVECHILD (myDIVECHILD (myDIVECHILD (myDIVECHILD (myDIVECHILD (myDIVECHILD (myDIVECHILD) // swfu ver swfu en la página de iframe swfu = new swfupload (configuración); var estadísticas = swfu.getstats (); stats.successful_uploads--; swfu.setstats (estadísticas); estado var = document.getElementById ("DivStatus"); status.innerhtml = "uploaded" + stats.successful_uploads + "Un archivo, también se puede cargar" + parseInt (swfu.settings ['file_upload_limit']-stats.successful_uploads) + "archivos";}Puede deberse al uso de iframe
SWFU en la función deldiv no puede ser reemplazado por esto
El efecto general es como se muestra en la figura:
Después de cargar la imagen y modificar la información nuevamente, debe obtener cuántas imágenes se han subido y combinarlas en Swfupload
Obtenga la ruta de imagen cargada desde el fondo a través de PHP y dale a una matriz JS a través de Smarty
var img_arr = new Array (); {if isSet ($ img_arr)} {section name = 'img_arr' loop = $ img_arr} img_arr [{$ smarty.section.img_arr.index}] = nuevo Array ('{$ img_arr [img_arr] .images_s}', '{$ img_arr [img_arr] .images_b}'); {/section} {/if}Consulte el documento SWFUPLOAD para obtener la siguiente información
flashready ()
Esta función del evento es un evento interno y no se puede reescribir. Este evento se activa cuando se instancia el SwFupload y el flash cargado completa todas las operaciones de inicialización.
Recordatorio: swfupload_loaded_handler en la configuración correspondiente
Así que configure swfupload_loaded_handler en la configuración de swfupload
swfupload_loaded_handler: cargado,
Luego defina la función cargada en Handlers.js
función cargada () {if (img_arr.length! = 0) {for (val en img_arr) {addImageFromDB (img_arr [val] [0], img_arr [val] [1], esto); }}}Llame a la función AddImageFromDB para modificar el número de imágenes cargadas y generar miniaturas de imágenes cargadas
// Inicializar la función de imagen cargada AddImageFromDB (src_s, src_b, swfu) {var stats = swfu.getstats (); stats.successful_uploads ++; swfu.setstats (estadísticas); estado var = document.getElementById ("DivStatus"); status.innerhtml = "uploaded <font color = 'green'>" + stats.successful_uploads + "</font> zhang, también puede cargar <font color = 'rojo'>" + parseint (swfu.settings ['file_upload_limit']-stats.succesfulfulfulfulfulfulfulfulfuleads) + "/" <font "<font"; AddImage (src_s, src_b);}For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript Algoritmos y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.