May282009

FancyUpload para flash player 10

Hace algunos meses publiqué un artículo sobre la extensión de Mootools FancyUpload para la subida múltiple de ficheros, tras la aparición del nuevo flash player 10 por parte de Adobe fancy upload dejó de funcionar correctamente en todos los navegadores que incluyeran el flash player 10.

De este modo y dada la demanda de todos vosotros he decidido explicar detalladamente el funcionamiento de fancyupload para flash player 10 con una demostración, ya que el error fancyupload se debe a un cambio en los métodos usados por flash player 10 en el browser.

Demo fancyupload para flash player 10

A continuación os adjunto una demo de fancyupload compatible con flash player 10:
[ Demo ] [ Descargar Ejemplo FancyUpload Flash 10 ]

Características fancyupload para flash player 10

  • Formulario alternativo y accesible en HTML.
  • En primer lugar añadiremos el código en PHP necesario para el desarrollo web de nuestra aplicación y así permitir la subida de ficheros con fancyupload.
  • Posteriormente añadiremos todos los ficheros en javascript necesarios para la ejecución de Fancy Upload como FancyUpload2.js, Fx.ProgressBar.js, Swiff.Uploader.js, mootools-1.2-core-nc.js y example_fancyupload_flash_10.js.
  • Finalmente añadiremos la hoja de estilos necesaria para estructurar la interfaz visual de fancy upload, en este caso el fichero se denomina estilos.css.

Espero que este artículo os sea de utilidad, ya que la demostración de FancyUpload para flash player 10 la he programado de forma estructurada y con comentarios para que sea de fácil compresión.

En cualquier caso, si tenéis alguna duda no dudéis en dejarme un comentario.

Share

24 Comentarios

+ Añadir Comentario
  • Algo que no entiendo del 10, es donde esta el copy del archivo que se subio. Osea a que directorio lo copio.

    Muchas gracias desde ya.
    Tomás

  • @Tomás: los ficheros por defecto siempre se suben a la carpeta temporal del servidor web o del sitio (dependiendo de la configuración), normalmente la carpeta será “/tmp/” y en ella se guardarán los ficheros.

    Como el script realizado es un ejemplo no me he preocupado en mover el fichero subido con fancyupload a otra carpeta, en caso de querer hacerlo… basta con usar la función “move_uploaded_file” de PHP.

    Un saludo,
    Alejandro Arco

  • Gracias por contestar Alejandro.
    Igual no entiendo en donde deberia ir esa función, porque en ningun momento aparece donde se esta guardando el archivo.
    Subo archivos y no los guarda, no se donde los esta subiendo…

    Saludos y gracias

  • Gracias por el comentario y aviso en mi blog, espero podamos colaborar en algo muy pronto.

    Saludos

  • @Tomás: lo que tienes que realizar es recepcionar el fichero por $_FILES como muestro en la demo si te la descargas.

    /**
    * Recepcion de Variables
    */
    $var = $_FILES[‘var’][‘tmp_name’];

    Posteriormente ya sólo nos queda mover el fichero subido a la carpeta que se desee con permisos 777. Por lo que le damos a la carpeta “upload” esos permisos con nuestro gestor “FTP”.

    Más tarde, definimos el nombre de fichero de destino; en este caso el fichero se moverá a la carpeta “upload” y tendrá el mismo nombre que el fichero subido anteriormente.

    /**
    * Definicion de variables
    */
    define(FILE, $_SERVER[‘DOCUMENT_ROOT’] .’upload/’. $_FILES[‘var’][‘name’]);

    Por último, movemos el fichero con los datos facilitados anteriormente:

    move_uploaded_file($var, FILE);

    Espero que está breve explicación os aclare las posibles dudas sobre que hacer con el fichero que se ha subido a nuestro sitio web.

    Un saludo,
    Alejandro Arco

  • Perfecto, muchas gracias Alejandro, ahora estoy editandolo para ver como sale.

    Te agradezco enormemente.

    Saludos

  • Hola Alejandro, gracias por toda la ayuda que me as brindado pero ahora me encuentro con un problema. Estoy subiendo imagenes pesadas para un sitio web y no me sube todas, generalmente me deja una o más fotos sin subir. Porque podra ser esto? Yo le cambie el peso maximo y la cantidad de archivos maximos.

  • Posiblemente esto ya dependa de la configuración del servidor web, ya que como me has comentado has cambiado el peso máximo y la cantidad de archivos máximos en la configuración de fancyupload.

    Prueba a modificar los valores del servidor web, para modificar los valores exclusivamente para el proyecto en el cual estas trabajando has de modificar el archivo .htaccess (si es un servidor Apache) como en el ejemplo que muestro a continuación:

    ### .htaccess ###
    ##############
    ### CONFIG ###
    ##############
    php_value upload_max_filesize 100M
    php_value post_max_size 100M
    php_value max_execution_time 3600
    php_value max_input_time 3600
    

    Pruébalo y me comentas.

    Un saludo,
    Alejandro Arco

  • Hola Alejandro
    Quiero subir a mi pagina web un archivo flash (que corresponde a una fotografia en 360ª). Cuando, a taves de un programa, transformo la fotografia (en jpg) en formato flash, se genera ademas del .SWF otra carpeta. Si yo separo el .swf de aquella carpeta el flash no se puede abrir. El punto es que mi archivo SWF que quiero subir a la web pesa solo 100 Kb, pero la carpeta que va junto con el .swf pesa 200 mb. Cual es el peso relevante (para que mi pagina web se abra rapidamente) que debo considerar, el del .swf o el de la carpeta?
    Gracias!!

  • @Andrea: no parece una buena solución el transformar la fotografía .jpeg 100 Kb a .swf con una herramienta distinta a Adobe Flash, ya que como estas observando te crea ficheros adicionales al .swf con un peso desorbitado.

    Un saludo,
    Alejandro Arco

  • yo tambien tenía la misma duda de Tomás. No sabia donde habia que ubicar el codigo para subir las imagenes a una carpeta especifica. Aqui les dejo el trozo de código para los que aun tienen problema con esto.

    Nota: El codigo que escribo a continuación lo escriben luego de la “recepción de variables”.

    if ($_FILES["var"]["name"])
    {
    $directorio = 'up/'; // up es la carpeta a la que subira las imagenes, debe estar creada previamente en la misma ubicación donde se encuentran los archivos de este ejemplo.
    $archivo = $directorio.$_FILES['var']['name'];
    move_uploaded_file($_FILES['var']['tmp_name'], $archivo);
    }

    A continuación explico algo que no hice anteriormente:

    $archivo = $directorio.$_FILES['var']['name'];

    En realidad esta linea no es necesaria, claro que si se omite debe hacerce una modificación, el hecho es que yo hice esto con el fin de que en un momento dado si queremos cambiar el nombre original de la imagen al subirla al servidor pues solo basta con reemplazar de la línea de codigo citada el pedazo “$_FILES[‘var’][‘name’]” por una variable php que contenga el nombre del archivo con el que deseemos guardar nuestra imagen en el servidor.

    Saludos.

  • Hola Alejandro
    Baje el programa y funciona de maravillas, aparte en castellano es genial para novatos como yo, mi consulta es donde se modifica para restringir tipo de extensiones de archivos, digamos queiro solo que suban archivos gif y jpg. Gracias muy bueno el tuto..

  • @victor: en el siguiente fichero “js/example_fancyupload_flash_10.js” de mi ejemplo añadí la siguiente parte de código que contempla la subida restringida de ficheros por extensión:

    $('frm-select-images').addEvent('change', function() {
    var filter = null;
    if (this.checked) {
    filter = {'Imagenes (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'};
    }
    swiffy.options.typeFilter = filter;
    });

    Esta parte de código hace que cuando pinchemos sobre el input con id=”frm-select-images”, sólo podamos seleccionar ficheros con las extensiones incluidas en el mismo.

    Un saludo,
    Alejandro Arco

  • Alejandro gracias por tu contestacion tan rapida, me ubico en donde me especificaste, pero sabes lo que queiro es que solamente puedan subir imagenes gif y jpg. como se puede hacer, ya que quisiera sacar el chechbok selecctor de imagenes. y que restrinja que solo se peude subir archivos jpg y gif. gracias espero nuevamente tu ayuda. victor de Argentina

  • @victor: abre el fichero “js/example_fancyupload_flash_10.js” y reemplaza la parte del código fuente que comprende la id=”frm-browse” por la que te adjunto:

    $('frm-browse').addEvent('click', function() {
    /**
    * Doesn't work anymore with Flash 10: swiffy.browse();
    * FancyUpload moves the Flash movie as overlay over the link.
    * (see opeion "target" above)
    */
    filter = {'Imagenes (*.jpg, *.jpeg, *.gif)': '*.jpg; *.jpeg; *.gif'};
    swiffy.options.typeFilter = filter;
    swiffy.browse();
    return false;
    });

    Un saludo,
    Alejandro Arco

  • te molesto por ultima, necesito agregar algo y no me sale.
    tome de ejemplo que otorgo Jefrey de subir a una carpeta las imagenes me funciona bien. Ahora lo que intente de varias maneras es qu equiero que al nombre de los archiv a subir terminen con numeros diferentes corridos ej: nombre_1.jpg , nombre_2.jpg pero no le encuentro la vuelta ya que puse aqui mismo una variable sumatoria, pero hace la primera suma que daria el numero 1 y se lo coloca a todos los archivos que subo de una.

    if ($_FILES[“var”][“name”])
    {
    $numero=$numero+1;
    $directorio = ‘up/’; // up es la carpeta a la que subira las imagenes, debe estar creada previamente en la misma ubicación donde se encuentran los archivos de este ejemplo.
    $archivo = $directorio.$numero.$_FILES[‘var’][‘name’];
    move_uploaded_file($_FILES[‘var’][‘tmp_name’], $archivo);
    }

    ME PODRIAS AYUDAR CON ESTO PLIS, MIL GRACIAS…

  • Hola Alejanddro. En primer lugar, muchas gracias por el artículo, es interesantísimo y me ha resuelto muchos problemas.

    Lo que no consigo es evitar el límite de 2 Mb que hay por defecto. Entro en example_fancyupload_flash_10.js y elimino la variable limitSize = 2 * 1024 * 1024 para que por defecto esté a false, sin embargo sigue sin dejarme subir más de 2 Mb ¿hay que modificar algo más? He estado mirando el código y, la verdad, no veo nada más que haga limitar el peso.

    Muchas gracias.

    Un saludo,

    Luis

  • @victor: eso te sucede porque cada fichero que se sube ejecuta esa parte del código de forma independiente, lo que yo haría sería subir el nombre y la ruta de cada fichero a una tabla de una base de datos y realizar una consulta de cual es la referencia (id) mayor actual en el momento del upload y sumarle uno a ese identificador…

    @Luis: asígnale un valor mayor según tus necesidades, pero ponle un valor… posteriormente modifica el .htaccess como explico en el comentario número 9.

    Un saludo,
    Alejandro Arco

  • Buenas Tardes Alejandro:
    ¿Cómo haría en el caso de que la ruta donde yo deseo subir los archivos sea una variable de sesión?

    Ojalá pueda responder mi inquietud.
    Muchas gracias por este excelente tutorial.

  • @Daniel: lo que debes hacer es iniciar la sesion con un session_start() en el fichero PHP que controla la subida del fichero, y/o también tienes la posibilidad de pasar el PHPSID por GET a través de la URL en caso de que no lo tengas configurado de forma automática.

    Un saludo,
    Alejandro Arco

  • Aun tengo problemas para poder guardar archivos en una ruta, la cual es una variable de sesión, por lo que le asigno a la variable dir, el valor de la de sesion, pero lo que realmente esta haciendo es copiandome el archivo al disco C.
    Puse a imprimir la ruta, y lo que realmente aparece es /nombredearchivo.doc

    Alguien me puede colaborar y avisarme el por qué esa variable no tiene valor?

    if ($_FILES[“var”][“name”])
    {
    $dir = $_SESSION[“dir”];
    $archivo = $dir.’/’.$_FILES[‘var’][‘name’];
    move_uploaded_file($_FILES[‘var’][‘tmp_name’], $archivo);
    }

  • Hola Alejandro:
    Muy buen código… pero sigo pegado en el paso 1: no logro subir el archivo.
    Al principio me salia un error 404, luego cree la carpeta upload (asi definí el nombre) en la raiz del sitio, pero ahora me sale un “securityError Error #2038”.
    ¿que puede ser esto?.

  • Hola Alejandro, estoy intentando instalar el fancyupload y no puedo grabar los archivos en una carpeta fija. Intente ya varias veces con los códigos de los comentarios 6 y 12 y siempre me aparece el error “httpStatus 406”. ¿Qué podrá ser?

    Muchas gracias

  • Les informo que el error “securityError Error #2038″ se presenta con Firefox cuando se estan usando conexiones SSL/HTTPS en el navegador o tines un firewall en ambos casos si lo desactivas el script funciona correctamente.

    Saludos desde colombia

Si tienes alguna consulta, escríbela ...