Upload de Archivos con Flash

El subir archivos a un servidor o upload es una de las tareas mas comunes, en esta ocación veremos la forma de subir archivos utilizando flash. Para ello haremos unos de la clase FileReference que permite subir o descargar archivos desde el servidor.

flashupload.gif

Creando el archivo inicial

Lo primero es crear un archivo flash con cuatro elementos básicos, el primero un campo de texto llamado txtarchivo que contendrá el nombre del archivo seleccionado para subir, el segundo es un botón llamado btbrowse que servirá para mostrar la ventana para buscar el archivo a subir, el tercero es un botón llamado btenviar que se encargará de hacer iniciar el envío y finalmente un campo de texto llamado txtestado que mostrará el estado del proceso.

Además de ello es necesario importar la clase que contiene a FileReference de la siguiente forma:

  1. import flash.net.FileReference;

Filtrando tipos de Archivo

Lo siguiente es definir que tipos de archivos se podrán aceptar, para ello creamos una variable llamada arrTypes donde agregaremos un objeto que contiene dos propiedades: description (Texto a mostrarse al seleccionar el archivo) y extension (Contiene todas las extensiones aceptadas).

  1. var arrTypes:Array = new Array();
  2. var objTypes:Object = new Object();
  3. objTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)";
  4. objTypes.extension = "*.jpg; *.jpeg; *.gif; *.png";
  5. arrTypes.push(objTypes);

Subiendo Archivos

El siguiente paso es crear una variable del tipo FileReference con el cual podremos subir los archivos seleccionados. Una vez creada la variable listUpload le adjuntamos un listener que nos servirá para detectar los eventos del upload. Por ejemplo al seleccionar el archivo (onSelect) mostramos el nombre del archivo seleccionado en el campo txtarchivo.

  1. var listUpload:Object = new Object();
  2. var fileUpload:FileReference = new FileReference();
  3. fileUpload.addListener(listUpload);
  4. listUpload.onSelect = function(file) {
  5.     txtarchivo.text = file.name;
  6. }
  7. listUpload.onProgress = function(file, bytesLoaded, bytesTotal):Void {
  8.     txtestado.text = "Subiendo archivo " + Math.round(bytesLoaded*100/bytesTotal) + "%";
  9. }
  10. listUpload.onComplete = function(file:FileReference):Void {
  11.     txtestado.text = "Archivo subido correctamente";
  12. }

Luego de ello es necesario agregarle las opciones a nuestros botones, agregamos el evento para seleccionar y para enviar.

  1. btbrowse.onRelease = function() {
  2.     fileUpload.browse(arrTypes);
  3. }
  4. btenviar.onRelease = function() {
  5.     fileUpload.upload("upload.php?action=upload");
  6. }

Uniendo todos estos elementos, tenemos el código necesario para hacer upload de archivos en flash.

  1. import flash.net.FileReference;
  2.  
  3. var arrTypes:Array = new Array();
  4. var objTypes:Object = new Object();
  5. objTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)";
  6. objTypes.extension = "*.jpg; *.jpeg; *.gif; *.png";
  7.  
  8. arrTypes.push(objTypes);
  9.  
  10. var listUpload:Object = new Object();
  11. var fileUpload:FileReference = new FileReference();
  12. fileUpload.addListener(listUpload);
  13.  
  14. listUpload.onSelect = function(file) {
  15.     txtarchivo.text = file.name;
  16. }
  17. listUpload.onProgress = function(file, bytesLoaded, bytesTotal):Void {
  18.     txtestado.text = "Subiendo archivo " + Math.round(bytesLoaded*100/bytesTotal) + "%";
  19. }
  20. listUpload.onComplete = function(file:FileReference):Void {
  21.     txtestado.text = "Archivo subido correctamente";
  22. }
  23.  
  24. btbrowse.onRelease = function() {
  25.     fileUpload.browse(arrTypes);
  26. }
  27. btenviar.onRelease = function() {
  28.     fileUpload.upload("upload.php?action=upload");
  29. }

Guardando los archivos en el Servidor

Hasta este punto se ha hecho el envío al servidor, pero nos hace falta un script en el servidor que se encargue de recibir y guardar este archivo. En nuestro caso utilizaremos PHP, para ello nos basaremos en el ejemplo Upload de Archivos con PHP.

[php]
if ($_GET[“action”] == “upload”) {
$archivo = $_FILES[“Filedata”][‘name’];
$prefijo = substr(md5(uniqid(rand())),0,6);

if ($archivo != “”) {
$destino = “files/”.$prefijo.”_”.$archivo;
copy($_FILES[‘Filedata’][‘tmp_name’], $destino);
}
}
[/php]

Pueden ver el resultado del ejemplo en flashupload. Finalmente les dejo los archivos fuente del ejemplo, para que lo puedan probar y hacer sus adaptaciones.

Comentarios Total 93 comentarios


joseLuis
Publicado: 22/12/2008 12:57 pm

Hola, me sirve el script en el programa de Flash, todo funciona bien al parerecer y aún el envio y guardar informacion en PHP, pero al revisar la carpeta Files en el servidor, no encuentra la información subida. Tengo servidor Linux.
Agradezco su atención.

unijimpe
Publicado: 22/12/2008 2:41 pm

Es muy probable que la carpeta donde se suben las imagenes no tengan permiso de escritura, verifica que esta carpeta permita la escritura.

javier
Publicado: 12/01/2009 2:10 pm

hoola!
Gracias por la aportacion es un excelente trabajo, solo que tengo un problema, no puedo ver a onde llegan los archivos a pesar d que se indica q el archivo fue subido correctamente, ya tenia creada la carpeta de files, que puedo hacer ayuda!!
Muchas gracias

Andrés
Publicado: 14/02/2009 10:55 am

Hola!

He encontrado una modificación de este cógigo en la que se utiliza un barra de progreso. La url es:

http://codigo-fuente.com/programacion_web/carga-de-archivos-con-barra-de-progreso-en-flash-y-php/

alejandro
Publicado: 26/02/2009 1:44 pm

mmm TENGO UN PROBLEMA EL BOTON DE EXAMINAR ME FUNCIONA CORRECTAMENTE, PERO CUANDO LE DOY AL BOTON DE SUBIR O EN SU DEFECTO DE ENVIAR, NO HACE NADA, NO SE QUE PUEDO HACER O COMO RESOLVERLO SOLO ME FALTA ESO

luis
Publicado: 21/03/2009 1:04 pm

Alguien sabe por que en unos servidores funciona y en otros no?
hay que habilitar algunos permisos?
Gracias

Helda
Publicado: 22/03/2009 5:20 pm

Hola, el tutorial me funciona perfecto, le cambie a que me descargara archivos .doc y xls, pero cuando le doy clik al de la laista, no me los descarga o aveces lo que hace es descargar un .zip que tiene basura)

Gracias por la ayuda

Karina
Publicado: 02/05/2009 9:04 pm

Muy bueno tu aporte y gracias por compartirlo, pero no puedo abrir el .fla con flash 8 podes ayudarme x fvor? GRacias

Daniel Hosoya Villarreal
Publicado: 10/06/2009 9:56 am

Gracias por el aporte, es muy útil, quisiera saber como le hago para que ya que cargo la foto se puede ver inmediatamente a través de un loadMovie, para Mostrar la foto que se cargo?.

Gracias.

Juan Martin
Publicado: 06/10/2009 12:00 pm

cómo hago para enviar en un mail la imagen que subi mas otros datos?

Juan Martin
Publicado: 06/10/2009 12:01 pm

cómo hago para enviar en un mail la imagen que subi mas otros datos?
Por ejemplo:
Nombre
Apellido
Mail
FOTO

jose
Publicado: 21/01/2010 6:33 pm

alguien me puede ayudar a configurarlo para instalarlo en mi web?
no se que parametros tengo que camiar con mis datos
gracias

FuDdY
Publicado: 12/04/2010 11:54 pm

grax x el tutorial, me ha servido bastante. aunq me he visto en la necesidad de hacerle algunas modificaciones, tu trabajo se agradece.

Yfenche
Publicado: 28/04/2010 1:21 pm

Hola a mi me funciona el script perfectamente pero cuando lo integro con una funcion de rescalado que tengo se va todo al traste, mi pregunta es si el archivo es jpg y el mime es “image/jpeg” porque cuando los subo desde flash y compruebo el mime $mime = $_FILES[‘Filedata’][‘type’]; me da que es “application/octet-stream”
Muchas gracias por el tutorial

Bikutoru
Publicado: 05/05/2010 11:20 am

Hola.
Genial el tutorial, pero necesito saber cómo conocer con anterioridad a subir el archivo sus respectivas dimensiones, es decir solo subir archivos con dimensiones 240 x 200 px

arturodalla
Publicado: 12/05/2010 7:37 pm

Buenas.. Muy buen tuto.

Una pregunta, ¡ como hago para limitar las subidas por ip ?

Por ejemplo quiero que un ip solo pueda subir 1 archivo al día .. como haría ?

Gracias por adelantado

Martín
Publicado: 09/06/2010 11:39 am

Muchas gracias.
Muy buen ejemplo. Funciona perfecto.
Obviamente solo necesito una parte y tengo que adecuarlo a mis necesidades pero la verdad, muy bien explicado y muy útil.
Saludos,
Martín Mariano Gil

josé moreno
Publicado: 28/06/2010 5:05 pm

Saludos.
ya he revisado ambos tutoriales. este de upload de archivos y el del correo por flash. pero como hago para que ambos interactuen y poner en la misma película del correo los elementos de este?. como declaro variables?. mi intención es que mientras envián un correo suban más de un archivo y lleguen al mismo correo junto con el texto capturado.
gracias y suerte

juliork
Publicado: 16/09/2010 7:04 pm

Una pregunta. con este script de flash es posible cargar mas de una imagen al mismo tiempo? es primera vez que veo un script asi (no se trabajar con flash) pero me interesa porque e visto varias paginas que te permiten cargar mas de un archivo al mismo tiempo. con este script se puede hacer eso? o habria que ponerle algo mas???

juliork
Publicado: 16/09/2010 7:26 pm

Man para los que preguntan sobre el tamaño del archivo de envio. Tienen que verificar y modificar upload_max_filesize de PHP, pues el por defecto tiene como valor maximo 2 Mb. al modificarlo te permitira enviar archivos mayores……..

Josephtorial
Publicado: 20/09/2010 10:55 am

Excelente tutorial, gracias por compartir tu scrip.

Daniel
Publicado: 22/09/2010 10:18 am

HEEEEEEEY gente, que pasa? No lees que a muchos no les funciona, no hay un solo post que resuelva el problema.

Julio
Publicado: 03/10/2010 9:44 pm

Hola, muy copado, te hago una pregunta simple, o capas que no, cual es la clase que hace que no te marque la ruta de donde estas subiendo la imagen. Por ejemplo: haces clic en la lupita, y te dice solo el nombre del achivo, y la extencion, pero no te da la ruta de donde la estas sacando. Digamos, funciona pero me podrias decir que hace que no aparezca dicha ruta?

chunilp
Publicado: 05/10/2010 6:01 pm

Hola, me funciona a la perfeccion, como le hago para que cuando suba la imagen no me ponga un nombre aleatorio, sino que me lo ponga en orden, o sea… que me guarde la imagen en el directorio con el nombre original+1, despues que me suba la otra y me la guarde con el nombre original+2 y asi suscesivamente. Help!!!

Paine
Publicado: 28/10/2010 9:47 pm

Hola muy bueno el post, y veo q ha servido a varios… Yo necesito justamente cargar una imagen pero con otros datos y q todo me llegue via mail para saber a quien corresponde la imagen subida…
Nombre
Mail
Comentario
Cargar foto
Si me pueden ayudar.. eternamente agradecida.. sls

Ricardo
Publicado: 09/12/2010 1:58 pm

Tengo una duda, según la información de flash, en la clase FileReference se pueden enviar postdata con Download, pero no entiendo para que…

Podría enviarse un XML en un postdata para ser procesado en PHP, crear un fichero temporal para ser descargado como un fichero existente?

jesus
Publicado: 13/06/2011 11:43 am

no funciona el link de descarga

flor valencia
Publicado: 05/07/2011 7:15 pm

hola he aplicado tu tutorial en famacolor.mx y me funciona perfecto en mac pero en pc no se termina de cargar marca el 100% pero el archivo no aparece en el ftp alguna sugerencia?

jaime
Publicado: 20/07/2011 1:20 pm

funciona para subir pdf ?? solo debo agregar la extencion ????

unijimpe
Publicado: 20/07/2011 10:00 pm

En este caso el ejemplo solo permite subir imagenes, para que acepte archivos PDF, tienes que cambiar las líneas:

objTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)";
objTypes.extension = "*.jpg; *.jpeg; *.gif; *.png";

Lo reemplazamos por:

objTypes.description = "Adobe PDF (*.pdf)";
objTypes.extension = "*.pdf";

Pablo
Publicado: 09/08/2011 12:23 pm

Hola a todos.
La verdad un exelente post, busque esto durante mucho tiempo sin buenos resultados. Todo me funciona perfecto, el unico problema es que no puedo ver las imagenes que subi, coloque la carpeta “files” en mi servidor y todo, pero nunca veo las imagenes cargadas. ALGUIEN YA PUDO RESOLVER ESTE PROBLEMA?? mil gracias a todos

Pablo
Publicado: 09/08/2011 12:32 pm

Hola a todos,
problema resuelto (para los que no podian ver las imagenes subidas) tienen que crear una carpeta con el nombre “files” en el mismo lugar donde estan los archivos index, lista, funcion, upload, etc. ejemplo:
si su web esta alojada en la carpeta “root” de su servidor ahi dentro tienen que armar otra carpeta con el nombre (por ejemplo) “subir” para asi ingresar a la parte de cargar imagenes de la sig. manera: http://www.susitio.com.ar/subir, de esa manera aparecera el contenedor para seleccionar imagenes….
Ahora, dentro de la carpeta “subir” antes creada, tienen que armar la carpeta “files” para que asi todo funciones…

No se que mas decir… lo trate de explicar lo mas facil posible…
Saludos a todos

Pablo
Publicado: 09/08/2011 1:31 pm

Otra pregunta…
Digamos que ya esta todo esto en orden, puedo subir la imagen, aparece en la carpeta, todo perfecto… Ahora, supongamos que yo quiero eliminar la imagen subida, por ejemplo, que vea la lista de las imagenes sibidas y que tenga una opcion para poder eliminarla.
Seria mucho pedir una mano en eso??
Millones de gracias a todos por este aporte

alejandro
Publicado: 24/08/2011 11:09 am

Che pablo, a mi me dice lo mismo de que esta subiendo, y cuando termina de subir me da el mensaje de éxito; pero no me sube los archivos al directorio “files” o sea que lo hace fantasmal xq no sube nada (el directorio files tiene permiso 777)

alejandro
Publicado: 24/08/2011 11:15 am

Ahora me estoy dando cuenta que en LOCALHOST me funciona sin problemas y me muestra todos los archivos que subí al “files” pero cuando lo subo a mi servidor no ya deja de funcionar y no me sube los archivos (lo hace de forma fantasmal) pero no me sube ningún archivo; que puede ser???

Bilos
Publicado: 21/09/2011 3:45 pm

Y si quiero que acepte imagenes y archivos pdf conjuntamente como podria ser…

Fatima
Publicado: 28/09/2011 6:58 am

Hola Bilos debes colocar en

objTypes.description = “Files (*.jpg, *.jpeg, *.gif, *.png, *.pdf)”;
objTypes.extension = “*.jpg; *.jpeg; *.gif; *.png; *.pdf”;

Espero responder tu pregunta

Chicos tengo un problema… en mac, todo me funciona perfect… pero a veces el nombre del archivo no aparece… y el problemon mas grande es que tengo es que debo añadir en ese archivo en una carpeta en el servidor que puede que exista y puede que no con java pregunto if(file.exists()) else file.mkdirs pero para mac asi exista el fichero no entra y me crea nuevamente la carpeta…. es decir me crea dos carpetas con el mismo nombre contenido diferente en una misma carpeta. No consigo informacion de solucion en java y la de flash a veces pasa a veces no! pero los archivos si suben todo fino

Bilos
Publicado: 13/10/2011 3:56 pm

Fatima un millon de gracias por tu respuesta, pero yo me referia a que salieran en opciones distintas en el combo, me explico mejor:
Que por default salgan los formatos para las imagenes, pero que uno pueda cambiar cliqeando en ese combo para escoger otro tipo de archivos…

Fatima, gracias nuevamente…

Bilos
Publicado: 13/10/2011 4:00 pm

Y que tiene que ver el archivo mail.php con el proyecto?, disculpen la pregunta pero no soy muy duchado en PHP

Sera que cuando sube las imagens emite un correo? a quien? o como lo habilito si en un caso no lo hace?

Gracias…

Azucena
Publicado: 10/11/2011 4:53 pm

De que forma puedo subir la imagen y previsualisarla como las fotos de identificacion de las redes sociales usando solo action script 3.0. Lo necesito sin usar php, pues lo que se necesita es ahorrar en lo referente al ancho de banda. GRACIAS

JOHAN
Publicado: 16/01/2012 10:27 am

DEVEN PONERLO EN C/: WAMP/WWW
Y EJECUTARLO DESDE EL NAVEGADOR CON LOCALHOST

Carlos Lopez
Publicado: 11/01/2013 1:54 pm

Saludos.. amigos…. podrias ayudarme… necesito que en vez de usa Php utilize APS ( se que es ya viejo pero asi lo nesecito)

Chicho recontra Chicho
Publicado: 18/11/2013 3:41 am

Hola, una pregunta es posible setear el path del archivo a subir, directamente en el textbox??, es decir, sin necesidad de abrir el dialog??.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)