Skip to Content »

Upload de Archivos con Flash

  • 24/10/2007
  • 10:56 am
  • unijimpe

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.

  1. if ($_GET["action"] == "upload") {
  2.     $archivo = $_FILES["Filedata"]['name'];
  3.     $prefijo = substr(md5(uniqid(rand())),0,6);
  4.    
  5.     if ($archivo != "") {
  6.         $destino =  "files/".$prefijo."_".$archivo;
  7.         copy($_FILES['Filedata']['tmp_name'], $destino);
  8.     }
  9. }

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.

Posts Relacionados

Total de Comentarios: 40

Publicidad
j
24/10/2007
11:48 am

Lástima que no incluya un porcentaje, para indicar el estado de la subida :(

unijimpe
24/10/2007
6:00 pm

Si tiene progreso, si te fijas bien esto se hace en el evento onProgress, en nuestro caso hemos mostrado un mensaje de texto indicando el porcentaje, pero pueden mostrar una barra que vaya creciendo de acuerdo al progreso.

jaun
25/10/2007
2:47 am

muy bueno tu trabajo, y mejor aun que compartes. gracias

pero donde queda el link? para previsualizar la imagen?

Giancarlo
26/10/2007
8:40 am

Mmmm… que interesante.

Subir archivos a tu pagina con Flash | MJG Adrian
26/10/2007
10:12 am

[...] En “unijimpe” me encuentro con este excelente tutorial que explica como crear un uploader de archivos con flash. (el cual sirve para que cualquier usuario pueda subir archivos a tu pagina). [...]

marcelo
26/10/2007
8:21 pm

la verdad q muy bueno, nunca lo habia visto en flash y sirve mucho. ahora te pregunto, si yo quisiera hacer lo mismo, pero para un formulario de contacto, es decir llenar los campos y aparte subir la imagen, como tengo q cambiar el coidgo para q pueda producir esto???
desde ya gracias.
saludos.

Freak Group | Diseño web, recursos y mucho más
27/10/2007
9:19 pm

Subir archivos con Flash…

En unijimpe encontre esta interesante guía en donde el autor del blog nos explica como armar de manera rapida y fácil un sistema upload de archivos con Flash.

El primer paso es crear una pelicula en flash que conste de 3 elementos: un campo de texto…

ismael
05/11/2007
5:37 am

en donde elijo la base de datos es o no ms esta buen el tuto

Blunk
18/11/2007
10:31 am

Funciona bien, pero no es posible determinarle un tamaño maximo en en actionscript de flash?

Alberto
24/11/2007
9:57 am

muy buena.. pero no puedo abrir el .fla

me da error al abrir el archivo.. por q? alguien me puede ayudar…
gracias de antemano..

marcos
26/11/2007
8:49 am

el error q te tira debe ser por la version d flash q usas. Descargate la trial de Adobe y probala de abrir, o d ultima escribime a mi correo, descargo y te paso convertida en la version 8…

Emerson
27/11/2007
6:52 pm

Muy buena información, muchas Gracias, tengo un par de dudas y espero que alguien me pueda ayudar
1. Como saber cual es el tamaño máximo de archivos que se pueden subir, ya que los de poco peso los deja sin problemas en el servidor, pero los que pesan más no lo hace.
2. Si el script de flash puede verificar si se subio de manera correcta el archivo, ya que por pantalla me aparece que subio correctamente, pero los de mayor tamaño no los guarda.

Muchas Gracias
Esto es de mucha utilidad, nuevamente gracias

Walton
29/11/2007
11:10 pm

Me sumo a las preguntas de Emerson, ya que a mi me sube archivos de un peso maximo de 400 kb, sin embargo quiero saber si ese es un problema del php o del hosting de la pagina, para detallar mas .. esta pagina la tengo en usuarios,lycos.es
Bueno , espero una respuesta.. y muchas gracias por esta informacion me ha sido de gran ayuda

Luis Pirir
29/11/2007
11:54 pm

Excelente el tutorial, gracias.

@Emerson y @Walton, lo que sucede es que aunque flash puede enviar archivos de 100Mb. via http, aun se tiene la limitante del tamanio en post, memoria y archivos a enviar via post, de apache, que si no estoy mal, esta configurado solo para trabajar con una memoria de 8Mb., subir archivos de 2Mb solamente.

Saludos.

erjavi
22/12/2007
6:06 pm

No me funcionaba con el flash8, pero el plash cs3 lo teneis aquí.

salu2

http://www.taringa.net/posts/downloads/903188/Adobe-Flash-CS3-Portable.html

Jose Mario
03/01/2008
10:52 pm

Para que haga un reload de pagina. Ej : Si se estan subiendo images en galeria.php?id=10 como se hace para cargar la misma pagina luego de subir el archivo

Cesar
05/01/2008
8:35 pm

Muy buen tutorial y funciona de maravillas.
Dos consulta:
1.- Habría alguna forma de evitar que el nombre de la imagen subida no se aumentado, por ejemplo el nombre de la imagen es F0001.jpg y aparece en la carpeta files como: 2b5c6a_F0001.jpg, lo cual no me permite cargar de allí con un XML, porque tendría que estar midificando el XML.
2.- Como puedo hacer para subir otra imagen con el mismo nombre y sea reemplazado por el nuevo.

Cordiales saludos.

Cesar
06/01/2008
12:24 pm

Otra vez molestándolo.
Ya resolví el punto 1 de mi pregunta anterior.
Lo que no consigo todavía lo del punto 2.

Agradecería su respuesta.

Cesar
06/01/2008
12:37 pm

Me apresuré en escribirle, sin antes verificar el problema que tenía en el punto 2, ya funciona como deseo.
Por si alguien tuvo la misma inquietud, para corregir los 2 puntos de mi primer post fue en ésta línea: $prefijo = substr(md5(uniqid(rand())),0,6); cambié el número 6 por un 0 y en ésta línea: $destino = “files/”.$prefijo.”_”.$archivo; eliminé el guión bajo.

Le reitero mi agradecimiento por tan espectacular tutor.

ganCT
09/01/2008
4:02 am

Gracias por el tutorial. Aunque tengo una duda.

Con FileReference me funciona a la perfección. Aparece la ventana para seleccionar y puedo subir el archivo.

Pero si intento usar FileReferenceList para poder seleccionar varios archivos al mismo tiempo al pulsar en el boton de “browse” no abre la ventana y cierra flash o el navegador; lo cuelga.

Alguien me puede ayudar?

Gracias.

ganCT
10/01/2008
12:46 pm

Curioso…. OPERA es el unico navegador que abre la
ventanita de elección de archivos. El resto se cierran solos.

felix
18/01/2008
6:03 pm

he subido todo en mi host de lycos pero no me funciona nada.
sale archivo suvido correctamente pero no se donde a suvido el archivo ni lo puedo visualizar
agradeceria sus respuestas

Mike Morales
20/02/2008
11:27 am

hola bro muy bueno tu tutorial me funciono a la perfeccio solo tengo una duda como le hago para limpiar el cambio donde se sube el archivo despues de que es cargado..!

gracias un saludo !!

Andres
07/03/2008
5:26 pm

Gracias bacan por brindar este codigo, andaba preocupado por q’ tenia otro codigo para hacerlo pero no funcionaba . este me ayudo muchisimo.
Nuevamente Gracias

Luiz
13/03/2008
5:48 pm

Cesar Yo Creo k tendrias k kambiar esta parte:

3.
$prefijo = substr(md5(uniqid(rand())),0,6);

esta en la ultima parte del tutorial

Raúl
14/03/2008
4:38 pm

Hola unijimpe, quiero felicitarte por el gran blog que tienes, nos sirve muchisimo y este scrip en particular me ayuda en mis proyectos web, soy mas diseñador que programador y pues me toma tiempo aprender php. Queria saber si me puedes ayudar con esto, a tu escrip le agregé unas lineas de otro scrip para que me cree una lista de los archivos subidos( lista.txt) utilizando a y a+ pero lo que quiero es que el nuevo archivo subido cree su nombre en la lista pero borrando el ultimo caracter de la anterior entrada ya que ese caracter cierra la instrucion ( ; ) haber si podrias ayudarme.

Gracias de antemano

natalia
17/03/2008
8:40 am

Hola expertos! tengo MUYYYY poca experiencia en el tema… mi problema es que hice todo al pie de la letra como explica este tutorial, el problema es que ..NO ME FUNCIONA!!! tira error, como que no encuentra el componente “flash.net.FileReference” me fijé en la carpeta de componentes flash y está… que podría ser??? MUCHAS GRACIAS A TODO AQUEL QUE ME PUEDA DAR UNA MANO CON ESTE TEMA!!
Saludos…

Pablo
18/03/2008
8:25 am

Tengo el mismo problema que Felix, me sale el mesnsage de subido correctamente pero no puedo visalizarlo en ninguna parte.

Raúl
19/03/2008
2:52 pm

Hola Mike, sobre tu duda de como borrar el espacio luego del upload:
Dedes de agregar en la en la ultima parte del scrip:

listUpload.onComplete = function(file:FileReference):Void {
txtestado.text = “Archivo subido correctamente”;
txtarchivo.text = “”;//agregar esto
}

Ricardo
04/04/2008
7:06 pm

Que tal amigo… oye al calar el ejemplo se traba que onda? jajaja lo calo con FireFox

luc
14/04/2008
7:35 pm

ACepta subir archivos FLV?
le pongo la extension y no me los toma

Hernán
30/04/2008
4:48 pm

Muy bueno. gracias por este tutorial. Lo único es que no logro cambiar la dirección de la carpeta a la cual llegan los archivos.

Eduardo
26/05/2008
12:50 pm

Muy bueno el tutorial, pero alguien sabe por que si esta funcionando perfectamente despues de subir varias fotos y hacer varias pruebas de repente no sube la foto??
Gracias

maxi
03/06/2008
3:03 pm

tengo un problema… no puedo ver los archivos subidos…

maxi
03/06/2008
3:06 pm

solucione mi problema…y lo hice rapido… je… es q no habia creado el directoria “files” en mi servidor… eso era todo… graxias…. por cierto MUY BUEN TUTORIAL!!!!… estuve buscando… encontre varios… pero sin resultados favorables…este es facil y funciona!!!…

gracias

maxi
03/06/2008
3:13 pm

otro punto para resolver..

como para sacarle la extension del nombre del archivo subido… ejemplo subo una img 08.jpg y se le agrega convinaciones adelante… no soy muy experto en la materia necesitaria una ayuda!

mx_060@hotmail.com mi email

accell
13/06/2008
9:09 am

El tutorial esta muy bueno..
solo que hecho varias pruebas y solo puedo subir archivos menores de 2mb. si subo uno de 2.01mb en edalente, ya no me aparece

¿que puedo hacer?

fabian
17/06/2008
5:30 pm

tengo creado la carpeta “files” en el server, indica que el archivo subio OK, pero en la caperta “files” no esta, coloque un archivo en la Carpeta “files” con FTP y cuando pincho ver archivos me muestar el archivo que coloque con FTP, que pasa..

Max Roa
18/06/2008
1:16 pm

excelente tutorial

gracias realmente lo necesitaba
pero
ahy algun codigo para en viar esa imagen por mail?

Hugo
24/06/2008
5:00 pm

Excelente tutorial. Quisiera agregar una cosa mas, por defecto en mac el evento onComplete no se activa, la solucion es meter dentro del php un echo(” “); y soluciona este pequeño bug. Saludos!

Enviar Comentario

(*)

(*)