am80

SWFUpload 2.0 [Subir archivos multiples con AJAX]

March 30th, 2007 by maltos18

SWFUpload2.0

SWFUpload2.0 consiste en una pequeña librería javascript/flash, que incorpora las habilidades de flash para enviar archivos múltiples, y la accesibilidad y estilo de html/css.

Con SWFUpload2.0 se puede…

  1. Subir archivos múltiples, a través de una selección múltilple
  2. Definir el comportamiento de Javascript para todos los eventos
  3. Retraer información de los archivos antes de que se envien
  4. Definir el estilo para botones de envió a traves de XHTML y CSS
  5. Mostrar información del progreso de envió utilizando HTML
  6. No es necesario recargar una pagina
  7. Funciona en todas las plataformas/navegadores donde Flash es soportado
  8. HTML alternativo en el caso de que Flash/Javascript no estén disponibles
  9. Restringir el tamaño de los archivos antes de enviarlos
  10. Restringir el tipo de archivo en base a su extensión
  11. Enviar archivos a una lista de espera, así como modificar dicha lista antes de iniciar el envio

Descargar swfupload

Sitio Oficial

Como funciona?

Se embebe dentro de las cabeceras el javascript swfupload.js

<script type="text/javascript" src="jscripts/SWFUpload/SWFUpload.js"></script>

Se define un contenido alternativo, este sera mostrado en caso de que el navegador carezca del reproductor flash o tenga javascript deshabilitado.

Dentro de las mismas cabeceras se define una instancia del swfupload que sera llamada una ves que la pagina haya cargado.

window.onload = function() {
	swfu = new SWFUpload({
		upload_script : "/upload.php?id=someid", // archivo encargado de los uploads
		target : "SWFUpload.swf?RandID=<?= rand(0,1000) ?>", // ID del layer donde se mostrara el flash embedido
		flash_path : "/jscripts/SWFUpload/SWFUpload.swf", // Path a donde se encuentra el swfupload.swf
		allowed_filesize : 30720,	// Tamaño maximo del archivo definido en bytes (dividir entre1024 para KB y entre 1024 nuevamente para MB)
		allowed_filetypes : "*.*",	// Tipos de archivo permitidos (en el caso de imagenes seria algo asi "*.jpg;*.png;*.gif")
		allowed_filetypes_description : "All files...", // Rotulo a mostrar en la seleccion de archivos
		browse_link_innerhtml : "Browse", // Html del boton "examinar"
		upload_link_innerhtml : "Upload queue", // Html del boton "enviar"
		browse_link_class : "swfuploadbtn browsebtn", // Style para el boton "examinar"
		upload_link_class : "swfuploadbtn uploadbtn", // Style para el boton "enviar"
		flash_loaded_callback : 'swfu.flashLoaded', // Función a llamar cuando flash este disponible
		upload_file_queued_callback : "fileQueued", // Función a llamar cuando se agregan archivos a la lista
		upload_file_start_callback : 'uploadFileStart', // Función a llamar cuando se inicia el envió de cada archivo
		upload_progress_callback : 'uploadProgress', // Función a llamar cuando se reciben datos en el progreso de subida de 1 archivo
		upload_file_complete_callback : 'uploadFileComplete', // Función a llamar cuando se completa el envió de 1 archivo
		upload_file_cancel_callback : 'uploadFileCancelled', // Función a llamar cuando se cancela el envío de 1 archivo
		upload_queue_complete_callback : 'uploadQueueComplete', // Función a llamar cuando se han enviado todos los archivos
		upload_error_callback : 'uploadError', // Función a llamar cuando existe un error en un envió
		upload_cancel_callback : 'uploadCancel', // Función a llamar cuando se cancela la lista de envíos
		auto_upload : false // Mostrar alertas del depurador ?
	});
};

La mayoria de las funciones que se pueden definir regresan el objeto file. el cual contiene los siguientes datos.

  • id - un id unico generado para cada envío
  • name - nombre del archivo que se esta enviando en ese momento
  • size - tamaño
  • type - tipo de archivo (extensión)
  • creationDate - fecha de creación
  • creator - información del software con el cual fue creado el archivo

SWFUpload no envia?

Un fallo conocido se presenta con apache, cuando mod_security se encuentra activado, en tal caso ha de crearse un archivo .htaccess con la siguiente indicacion

SecFilterEngine Off
SecFilterScanPOST Off 

Se muestra el contenido html aunque flash esta instalado?

En varias ocasiones note que flash no es detectado, el problema lo he resuelto agregando a través de php esto a la instancia del swfupload, de tal manera que siempre se forza al swf a ser recargado desde el servidor y no del cache.

target : "path/swfupload.swf?RandID=<?= rand(1000,2000) ?>"

Ejemplo de upload.php para recoger los archivos que se envían desde flash?

El siguiente es un ejemplo de un archivo php para recibir las imágenes enviadas a través de swfobject.

<?php

$folder_destino = "./folder_donde_se_guardan_las_imagenes/";

// intentar mover el archivo al directorio destino
if (@move_uploaded_file($_FILES['Filedata']['tmp_name'],$folder_destino)){

		// Aqui se movio
		header('HTTP/1.1 200 OK');

// Si el envio falla
}else {

		// Reportar el error
		header('HTTP/1.1 404 Not Found');
	 
		// Guardar el error en un archivo
		error_log("Error al intentar enviar archivo".date()."\n",3,"logs.txt");
	 
}

?>

Trabajo con sesiones pero no continúan los datos en el upload.php aunque inicio la session?

Si la ruta donde se van a guardar cambia, y esta por ejemplo dentro de una sesión, es necesario iniciar una sesión en el código de arriba indicando el id con el que se venia operando, de tal manera que este bloque deberá encontrarse en la parte superior.

<?php

    // Al inicio del PHP
    if(isset($_GET['SessionID'])){
        session_id(trim($_GET['SessionID']));
    }

    // start session
    session_start(); 

?>

Y en la configuracion agregarse el id como parametro

swfu = new SWFUpload({
	upload_script : "upload.php?SessionID=<?= sesion_id(); ?>",
	target : "SWFUploadTarget",
	flash_path : FlashPath,
	allowed_filesize : (200*1024),    // 200 K
	allowed_filetypes : "*.*",
	allowed_filetypes_description : "Todos los archivos",
	browse_link_innerhtml : "<h1>Agregar</h1>",
	upload_link_innerhtml : "<h1>Enviar<\/h1>",
	flash_loaded_callback : 'swfu.flashLoaded',
	upload_queue_complete_callback : function(){
		alert('se enviaron todos los archivos');
	},
    auto_upload : false
});

SWFUpload Screencast


Posted in Flash, PHP, AJAX, Javascript | 4 Comments »

Cerrar
E-mail It