Se ha escrito y discuto mucho sobre si es o no es factible utilizar AJAX para subir un archivo al servidor. Por una necesidad personal yo también me vi involucrado en esta serie de discusiones. La finalidad de este artículo es que le sea útil a alguien; principalmente a mi.
Entonces ...
Al finalizar este pequeño tutorial deberías entender a la perfección este ejemplo.
Me voy a disfrazar de traductor en Inglés. Sería algo como Archivo Subido con AJAX. Esto, hoy por hoy, no se puede hacer. Es así y no hay vuelta que darle.
Entonces usted dirá ...
- heeee, si yo en gmail puedo subir archivos y lo hago con AJAX !!!.
Yo le respondo ...
- No sea bobo, yo también creía lo mismo.
Hay sobradas muestras que el objeto XMLHttpRequest no puede enviar archivos al servidor.
Entonces deberíamos cambiar el titulo del post. Sería así:
Frente a esta inmutable condición los desarrolladores han buscado una buena forma de simular scripts para subir archivos al servidor como si fuese con AJAX, y por lo menos conmigo lo lograron.
Utilizaremos tan solo dos scripts muy sencillos. Luego iremos mejorando y complementando el desarrollo hasta llegar a nuestro objetivo.
Es es un simple formulario HTML con un campo FILE y un marco flotante iframe denominado iframeUpload. Cuando enviamos el archivo al servidor ejecutaremos el script controlUpload.php y la respuesta del server se hará en nuestro iframe ya que apuntamos al mismo dentro de la etiqueta target en la declaración form.
$tipo = substr($_FILES['fileUpload']['type'], 0, 5);
// Definimos Directorio donde se guarda el archivo
$dir = 'archs/';
// Intentamos Subir Archivo
// (1) Comprovamos que existe el nombre temporal del archivo
if (isset($_FILES['fileUpload']['tmp_name'])) {
// (2) - Comprovamos que se trata de un archivo de imágen
if ($tipo == 'image') {
// (3) Por ultimo se intenta copiar el archivo al servidor.
if (!copy($_FILES['fileUpload']['tmp_name'], $dir.$_FILES['fileUpload']['name']))
echo '<script> alert("Error al Subir el Archivo");</script>';
}
else echo 'El Archivo que se intenta subir NO ES del tipo Imagen.';
}
else echo 'El Archivo no ha llegado al Servidor.';
controlUpload.php | Ver
Cuando se ejecuta el script, este intenta rescatar los datos del archivo a subir. Para eso se vale del array global de PHP $_FILES. Si no estas muy familiarizado recomiendo que leas esta sección del manual oficial para entender su funcionamiento y sus particularidades.
En las primeras líneas presentamos el nombre del archivo temporal generado por nuestro motor PHP, el segundo es el nombre real del archivo y el tercero es el tipo de archivo.
Si estos valores están definidos evidentemente el archivo llego al server. Estas líneas mas adelante no las utilizaremos; ahora sólo las usamos para realizar el seguimiento del script.
Asignamos a $tipo el tipo de archivo para poder controlar que sea una imágen. Se cortan los primeros 5 caracteres y si todo es correcto $tipo tendrá el valor image. Si no es una imagen tendrá un valor distinto. Este control se puede hacer de diversas formas; nosotros utilizamos esta.
Luego, intentamos copiar el archivo temporal en forma definitiva en algún sector físico en nuestro servidor. Se verifica en forma anidada definición de nombre temporal de archivo, tipo de archivo y si el motor concretó la copia.
En este ejemplo lo hacemos en la carpeta archs/.
Si está todo bien podemos pasar al segundo paso.
En este link podemos probar el script. Podemos ver los archivos subidos al server en este link.
Aclaraciones.
Hay que definir permisos de escritura de PHP en el directorio a copiar el archivo. En nuestro caso es la carpeta archs.
Empecemos a modificar un poco los archivos anteriores.
En primer lugar vamos a eliminar el botón submit Enviar y vamos a disparar el formulario con una orden en JS.
Vamos a ocultar el iframe.
Al final del archivo agregamos una línea que nos dirige a un simple script que nos muestra los archivos subidos al server; más que nada para que puedas corroborar la funcionalidad.
Esta línea no se presenta en el script.
Y al script controlUpload.php le vamos a agregar alertas de control (también con JS por ahora). Además vamos a eliminar sentencias que se han vuelto innecesarias al ocular el iframe.
// Definimos Directorio donde se guarda el archivo
$dir = 'archs/';
// Intentamos Subir Archivo
// (1) Comprovamos que existe el nombre temporal del archivo
if (isset($_FILES['fileUpload']['tmp_name'])) {
// (2) - Comprovamos que se trata de un archivo de imágen
if ($tipo == 'image') {
// (3) Por ultimo se intenta copiar el archivo al servidor.
if (!copy($_FILES['fileUpload']['tmp_name'], $dir.$_FILES['fileUpload']['name']))
echo '<script> alert("Error al Subir el Archivo");</script>';
else
echo '<script> alert("El archivo '.$_FILES['fileUpload']['name'].' se ha copiado con Exito");</script>';
}
else echo '<script> alert("El Archivo que se intenta subir NO ES del tipo Imagen.");</script>';
}
else echo '<script> alert("El Archivo no ha llegado al Servidor.");</script>';
controlUpload2.php | Ver
Ya se empieza a parecer a un verdadero AJAX FILE UPLOAD. Que siga el circo !. Show must go on.
Con estas últimas modificaciones tendremos la base final para poder implementar nuestro FILE UPLOAD con un comportamiento muy similar a gmail.
Al formulario lo vamos a contener en un div con id formUpload.
Al archivo upload3.php, aparte del formulario de envío le vamos a agregar una sencilla función resultadoUpload (estado, file) realizada en JS que, dependiendo del código que nos 'envíe' controlUpload.php en las variales estado y file (ahora vemos como ...) imprimirá en dicho div un mensaje de respuesta al intento de subida.
if (estado == 0)
var mensaje = 'El Archivo <a href="archs/' + file + '" target="_blank">' + file + '</a> se ha subido al servidor correctamente' + link;
if (estado == 1)
var mensaje = 'Error ! - El Archivo no llego al servdor' + link;
if (estado == 2)
var mensaje = 'Error ! - Solo se permiten Archivos tipo Imagen' + link;
if (estado == 3)
var mensaje = 'Error ! - No se pudo copiar Archivo. Posible problema de permisos en server' + link;
document.getElementById('formUpload').innerHTML=mensaje;
}
La impresión de nuestro mensaje en el div lo hace en la última linea de la función.
Este sitio tiene una buena descripción del conjunto de funciones getElementBy*. De todas formas, con un poco de tu gran astucia podrás encontrar muchos ejemplos de su funcionamiento.
Ahora solo resta modificar controlUpload.php para que en vez de ejecutar una ventana alert () (como en el ejemplo anterior) simplemente ejecute el código JavaScript para llamar a la función resultadoFile () enviándole los datos correspondientes al intento de subida del archivo.
El punto llamativo es como accedemos desde el iframe oculto a la función que se encuentra en la página que lo contiene. Utilizamos la palabra reservada de JS parent.
Las otras modificaciones son para mejorar estéticamente las páginas. También se utilizan dos scrips en php. verArchivos.php para ver los archivos subidos y eliminar.php que no requiere demasiada explicación.
Este humilde tutorial se hizo más largo de lo que hubiese querido. Voy a seguir trabajando para mejorar el funcionamiento y evolucionarlo. Queda pendiente una barra de progreso (ahí creo que no podemos escapar de AJAX) y otras formas de aplicación.
Tomen al mismo y a todo el código como una guia par desarrollar esta pequeña aplicación. Faltan muchos controles de errores, de seguridad, etc. El código fuente presentado no es idéntico a los archivos que se pueden descargar; esto es simplemente por una cuestión de prolijidad.
Disculpen mi desorden semántico y gramatical; como la mayoría, soy atrevido al jugar el papel de tutor. Nada más lejos de mis fines. Simplemente lo mío es ayudar como así también me han ayudado.
Saludo muy grande a la gente de ForosDelWeb.
lu dice,
March 7, 2007 at 7:21
Muchas gracias. Buen e interesante artículo. Buena pedagogía.
RetroFOX dice,
March 7, 2007 at 7:32
De nada lu. La verdad que para mi es importantísimo tu elogio, ya que hace poco empecé con el blog y es muy gratificante saber que lo que uno intenta transmitir se concrete, mas allá de la cantidad. Saludos.
Ramón dice,
March 8, 2007 at 21:17
Muy bueno. Ya lo creo. Es sencillo, directo, versátil y fácil de adaptar e implementar.
RetroFOX dice,
March 8, 2007 at 23:11
Gracias Ramón. Esa era (y es) la idea.
RetroFOX dice,
March 8, 2007 at 23:11
Gracias Ramón. Esa era (y es) la idea.
Viet dice,
March 12, 2007 at 23:34
Muy buen y claro el laburo!
Muchas gracias
RetroFOX dice,
March 13, 2007 at 8:39
Gracias Viet. Ahora estamos tratando de implementar una barra de progreso, pero el tema no es tan sencillo como pareciera.
Web_Alf dice,
March 13, 2007 at 12:33
Estimado RetroFOX:
No esto de acuerdo con el echo de confundir AJAX con JavaScript o PHP, porque existen diferencias bien marcadas y me parece que el codigo es bueno, pero de ahi a mostrar AJAx hay mucha diferencia.
Saludos
RetroFOX dice,
March 13, 2007 at 12:55
Web_Alf … me parece que no entendiste del todo bien el tutorial. Lo que yo intento es explicar justamente la gran confusión que existe sobre este tema. Básicamente aclarar que no se puede realizar un upload con AJAX.
Fabian dice,
March 14, 2007 at 10:06
Muy buen articulo haz hecho en tu blog.
Además eres el maestro de la practicidad y sencillez, era justamente lo que venía necesitando para mi web.
Me gusta los contenidos que propones en tu blog, ya te agregue a Mis favoritos.
Sigue con tu buen trabajo.
RetroFOX dice,
March 14, 2007 at 12:11
Gracias Fabián. Agradezco mucho tu comentario. Me gustaría saber cual es la dirección de tu web.
Lola dice,
March 14, 2007 at 15:27
Hola. De todo corazón, gracias por poner al alcance de todos los programadores estas líneas de código. He de decirte que llevo varios días intentando subir archivos al servidor y únicamente lo he conseguido gracias a tus ejemplos. muchas gracias.
RetroFOX dice,
March 14, 2007 at 18:03
De Nada Lola. La verdad que me reconforta mucho los comentarios que he recibido. Saludos
DALTON dice,
April 11, 2007 at 16:03
leyendo sobre esto de ajax y el upload de arichivos se dan discuciones interesantes sobre lo que es y no es ajax.
yo como principiante en esto del web y sus grandes misterios tambien quedo confundido con tanta contraposicion de conceptos.
NO ES AJAX TODA AQUELLA TECNOLOGIA EMPLEADA PARA COMUNICARSE DE FORMA ASINCRONA CON EL SERVIDOR? SEA ESTE EL OBJETO HttpRequest O ALGUNA OTRA ARTIMAÑA QUE SAQUEMOS DE LA MANGA?
En un principio he creido que los iframes ocultos se podria considerar ajax. pero en realidadad no es HACER PARECER ASINCRONA LA COMUNICACION.. SINO QUE ASI LO SEA..
Los iFrame son una forma de Emular las comunicaciones asincronas no de hacerlas.
RetroFOX dice,
April 11, 2007 at 16:39
Seguro … un iFrame no es mas que una forma de incluir una página dentro de otra.
terminus7 dice,
April 12, 2007 at 6:10
Claro y el objeto XMLHttpRequest sólo hace llamadas a una URL, usar un iframe para realizar llamadas es igual de asincrono que con XMLHttpRequest porque mientras se carga la pagina dentro del iframe nuestro codigo sigue ejecutandos, solo que no existe una etiqueta HTML para confundir.
pablo sosa dice,
April 20, 2007 at 16:47
bueno gracias por el tutorial, la verdada me depejo varias dudas que tenia
te comento que tengo un pequeño problema
te invito a que lo veas http://www.clasificadosiguazu.com.ar/phpupload/upload.php
parece que carga el archivo pero despues no se puede visualizar
funciona tipo foro
gracias
pablo sosa
Argentina
RetroFOX dice,
April 20, 2007 at 21:20
Necesitaría que me muestres lo que hay en la línea 33 …
do_upload.php on line 33.
Seguramente es la Línea donde intenta copiar el archivo, en el servidor, desde el directorio temporal al directorio que has especificado.
Ante este problema, podes tener problemas de permiso o mal configurada la ruta del directorio de almacenamiento.
Saludos y Gracias.
charliesl dice,
April 26, 2007 at 16:38
Muy bueno!
RetroFOX dice,
April 26, 2007 at 16:59
Gracias Charliesl
Milko dice,
April 27, 2007 at 12:08
Hola.
He leido el articulo y me parece muy interesante. En esta direccion http://www.webtoolkit.info/ajax-file-upload.html existe un codigo similar para subir un archivo al servidor, este usa la opcion “onload” del iframe para notificar el termino del archivo.
Saludos.
RetroFOX dice,
April 27, 2007 at 13:33
Gracias Milko. Le voy a echar una ojeada.
Saludos.
mauricio dice,
May 11, 2007 at 18:14
Se mira bueno, lo voy a leer detenidamente
RetroFOX dice,
May 11, 2007 at 18:18
Bueno … espero que te sirva. Lo que no … comentalo así lo mejoramos. Saludos y Suerte.
Sabri dice,
June 6, 2007 at 17:19
Hola! Gracias! Me sirvió tu explicación; Estoy usando estos métodos creando una página con AJAX y puedo subir los archivos el problema es que no puedo eliminarlos porque se me están perdiendo las referencias a las funciones ; alguna sugerencia?
RetroFOX dice,
June 6, 2007 at 20:18
Las referencias a las funciones … A que te referís con eliminarlos ?. Por los archivos temporales subidos al servidor no te preocupes, se eliminan solos. Tal vez estes utilizando algun artilugio de programación para poder manipularlos mejor … no entiendo muy bien la pregunta.
Me podrías aclarar así puedo ayudarte un poco mas …
Disculpas y Gracias por tu comentario Sabri.
insanuss dice,
June 15, 2007 at 13:20
Cada día la programación se vuelve mas tonta y complicada, un claro ejemplo el ajax, yo tenia la impresión de que con el XMLHttpRequest no se podían subir archivos, que bueno que haya alguien que explique todo, ya que no se pude, siempre son buenos los malditos iframes.
RetroFOX dice,
June 16, 2007 at 13:57
Gracias. Tu impresión es correcta. No se puede … pero se pueden buscar alternativas. o artilugios que nos ayudan a implementar mejor nuestras aplicaciones.
Saludos.
Daniel dice,
June 23, 2007 at 5:04
Excelente contenido viejo. Bien explicado, detallado y de amena lectura. Una de las cosas que me quedan pendientes de “la web 2.0″ es el upload de archivos, asi que me viene al pelo poder leer las experiencias en el tema de un colega desarrollador. Me lo guardo para leerlo detenidamente. Felicitaciones.
Saludos.
RetroFOX dice,
June 24, 2007 at 12:45
Gracias Daniel por el comentario. Ya hemos intercambiado opiniones otras veces si no me equivoco. Espero que sigas con tus artículos siempre tan entendibles y didácticos. Saludos y nos vemos.
Nen dice,
June 27, 2007 at 10:26
Muchas gracias, me salvaste la vida!
Estaba estancado en esto de subir archivos con ajax.
RetroFOX dice,
June 27, 2007 at 10:32
De nada Nen. LA idea buscada era ayudar. Saludos.
Kary López dice,
June 28, 2007 at 13:47
amigo!! me has salvado la vida y me has ahorrado varios días de búsqueda para lograr el upload de archivos!! uff que habría hecho sin ti!! jaja solo quería agradecerte la ayuda que me has dado y también felicitarte por tu maravilloso trabajo!! asi deberian ser las expliaciones en todos los blogs y foros… bueno muchas gracias y cuando gustes pasate por mi pagina para que observes que mi sistema de upload fue ingeniado por ti! jaja avisame y serás usuario VIP jeje bueno nos vemos bye!
Kary López dice,
June 28, 2007 at 13:54
oye… quise bajarme el codigo de eliminar archivos pero al parecer el archivo no existe o no se que pasa… si despues pudieras ponerlo en linea te lo agradeceria… gracias!
RetroFOX dice,
June 28, 2007 at 15:38
Gracias Kary. Ek archivo eliminar.php lo saqué creo que por cuestiones de seguridad. Sin embargo, cuando descargues los archivos del ejemplo vas a ver que lo tenes. Ahí podes ver y ejecutar el archivo en cuestión.
Saludos.
Pablo dice,
August 2, 2007 at 9:54
alguien sabe como puedo restringir la subida de archivos a exes y zips? he intentado cambiar la parte del codigo
// (2) - Comprovamos que se trata de un archivo de imágen
if ($tipo == ‘image’) {
he cambiado image por file, exe,… mil cosas y nada…
alguien sabe como cambiarlo?
joseBedoya dice,
August 6, 2007 at 21:02
Excelente tutorial, me ha servido muchisimo.
RetroFOX dice,
August 6, 2007 at 21:05
Gracias JoseB. Esa ea la finalidad del artículo.
joseBedoya dice,
August 6, 2007 at 21:08
Hola Pablo y todos, pues he estado mirando los archivos (que por cierto muy buenos y de gran ayuda) y creo que de esta manera podemos limitar la subida de archivos dependiendo de lo que necesitemos.
Simplemente en la variable array $mimetypes declaramos los que necesitemos. En el siguiente enlace podrás encontrar los diferentes tipos de mime. http://www.au.cl/tutoriales/article.php?id=037
if (is_uploaded_file($_FILES[‘archivo’][‘tmp_name’])){
// Mime types permitidos
$mimetypes = array(“image/jpeg”, “image/pjpeg”, “image/gif”, “image/png”);
//
// Obtenemos la información de la imagen
$name = $_FILES[‘archivo’][‘name’];
$type = $_FILES[‘archivo’][‘type’];
$size = $_FILES[‘archivo’][’size’];
$tmp_name = $_FILES[‘archivo’][‘tmp_name’];
$error = $_FILES[‘archivo’][‘error’];
//
// Verificamos si el archivo es una imagen válida
if(!in_array($type, $mimetypes)){
echo ‘<script>parent.resultadoUpload (\’2\’, \’‘.$name.‘\’);</script>’;
exit();
}
//
$datosArchivo = getimagesize($tmp_name);
if (!copy($tmp_name, $name)){
echo ‘<script>parent.resultadoUpload (\’3\’, \’‘.$name.‘\’);</script>’;
} else {
$archivoUp = $name;
rename($archivoUp, “zzz/”.$name);
echo ‘<script>parent.resultadoUpload (\’0\’, \’‘.$name.‘\’);</script>’;
}
}
}
echo ‘<script>parent.resultadoUpload (\’1\’, \’‘.$name.‘\’);</script>’;
RetroFOX dice,
August 6, 2007 at 21:10
Gracias por el aporte JoseB. Esperemos que Pablo se de una vueltita para aprovechar tu ayuda. Saludos.
joseBedoya dice,
August 7, 2007 at 12:16
Gracias RetroFOX por organizarme el post, pero te agradecería que me completaras las partes que no muestra del html, donde se imprimen los script que no salen “echo script parent.resultadoUpload, etc”, ya que podría confundir a algún visitante.
RetroFOX dice,
August 7, 2007 at 17:45
Hola José … lo que me pasó con los últimos comentarios de todo el blog en general fue que los perdí a causa de una mala maniobra. Entonces traté de reconstruirlos a partir de los emails que me llegan a mi casilla cuando un usuario postea. Realmente está igual que el email; pero me podrías mandar por favor un email con el código original ?
Disculpame por meter dedo en tus comentarios, generalmente no hago esto.
Saludos.
joseBedoya dice,
August 8, 2007 at 9:51
Retro cual es tu email para enviarte el código, ya que por aca no cogen las etiquetas html. Gracias.
RetroFOX dice,
August 8, 2007 at 12:21
haaa, perdón … rdsuarez@gmail.com.
Saludos.
RetroFOX dice,
August 9, 2007 at 1:09
Creo que ahí esta José. Un Saludo.
proclamo dice,
August 14, 2007 at 19:41
Hola RetroFox, es justo lo que buscaba. A mí me da igual si algo es Ajax o no, lo que me importa es que la experiencia de usuario sea fluída y lo más parecida posible al uso de cualquier programa de escritorio. Usaré tu ejemplo para algo en lo que estoy trabajando. Cuando lo acabe lo daré a conocer. Fue un honor verte por mi blog
Nos vemos.
RetroFOX dice,
August 14, 2007 at 22:11
Bueno, esperamos tus desarrollo. Me reconforta que te sirva … y aún mas tus elogios. Para mi también es un honor compartir experiencias con gente que le guste hacer estas pequeñas cositas.
Saludos y nos vemos.
Gabriel dice,
August 24, 2007 at 14:28
Muy buena info, y desde ya muchas gracias por ponerte en el trabajo de investigar, desarrollar y publicar un material de este tipo, que sirve y ayuda a los demas.
Te felicito por la explicacion, es simple y facil de seguir.
Un abrazo.
RetroFOX dice,
August 27, 2007 at 13:40
Gracias Gabriel por tu participación y gracias aún más por los elogios.
Nos vemos.
Perludium dice,
September 18, 2007 at 23:03
Oye subi una foto que no debia ser la puede borrar se llama DSC00057.jpg
Gracias
RetroFOX dice,
September 19, 2007 at 8:32
Ahora trato de borrala. Saludos.
next dice,
November 7, 2007 at 19:23
jajajaja pajaron X) califa
buen script man saludos…
Gustavo dice,
November 26, 2007 at 19:31
Hola… muy bueno el script y la explicación. Tenés alguna idea de como puedo hacer para el seguimiento del archivo. Se puede con este script?. Es decir… una barra de progreso sería perfecto…pero si es complicado.. hay alguna forma que el usuario por lo menos vea “Cargando…” solamente?
Gracias.
RetroFOX dice,
November 27, 2007 at 8:16
Lo de la barra de progreso … casi que te diría que te olvides. A ver, en realidad todo depende del servidor. Si vos tenes un server propio y podes modificarlo a tu gusto, entonces podrías parchear PHP o utilizar algun script en pyton; no lo se con exactitud, pero algo así tenes que hacer.
Pero si estás en un hosting o servicio dedicado donde no tenes mucha libertad, olvidate.
Respecto a cargando …; seguro que se puede … es adornar un poco más este código.
Saludos y gracias por el comentario.
javier dice,
December 4, 2007 at 19:10
la verdad me ahorraste mucho tiempo y un lujo leer tus letras es muy llevadero, gracias por tu aporte.
RetroFOX dice,
December 5, 2007 at 10:00
Gracias Javier por tu comentario.
Saludos.
Hernán dice,
December 26, 2007 at 18:21
EXCELENTE EL CÓDIGO!!!!!!!
RetroFOX dice,
December 27, 2007 at 8:09
Gracias Hernan. Un Saludo. Felices Fiestas.
dinamo dice,
December 31, 2007 at 3:50
gracias amigo por tu ayuda y desinterés al realizar y explicar tan bien tu código en forma desinteresada gracias a estos aportes cada vez aprendemos mas y la web se hace un lugar donde cada cual puede aportar algo
RetroFOX dice,
January 1, 2008 at 23:25
Bueno, gracias dínamo; esa es la idea de este artículo. Saber que es útil es para mi un pequeño logro. Saludos.
ODUQUE dice,
January 4, 2008 at 12:04
Muy buen artículo, te felicito. No creo que haya que hacerlo más corto, así esta muy bien.
Tengo una necesidad puntual y preguntica,
Tengo un formulario que envía información via ajax al guardar y adiciono este nuevo formulario para enviar un archivo (el de este artículo), quedando por ejemplo algo así:
Adicionar foto: [_________][Examinar…]
Nombre: [_____________] - Apellido: [_____________][Guardar]
Ya que en el proceso normal debe examinar y subir la foto antes de guardar, la pregunta es la siguiente:
Donde pongo la foto (archivo) temporalmente, con que nombre (archivo) y como luego hago para anclarla o relacionarla con este formulario que se va a guardar?
Muchas gracias.
RetroFOX dice,
January 4, 2008 at 13:40
Creo que son dos procesos independientes … donde vas a tener que usar tu picardía para relacionar los datos con la imagen.
Vas a tener básicamente dos scripts (.php supongamos) de control de transferencia. Uno, el de los datos del formulario, que será llamado por AJAX y el otro que es llamado mediante este artilugio, Lo que deberías hacer es tratar de relacionar estos scripts para que cuando, por ejemplo, se concrete el upload puedas relacionar ese archivo con los datos. Tal vez deberías usar algunas variables globales.
La verdad que no lo he implementado. Debería haber info en la red.
Saludos; perdón por el poco apoyo concreto.
ODUQUE dice,
January 4, 2008 at 15:54
Muchas gracias
Ya tengo la solución, eso creo, voy a mostarte al final como quedó.
RetroFOX dice,
January 4, 2008 at 15:56
Encantado de la vida
Legion dice,
January 8, 2008 at 0:12
Muchas gracias por el artículo. Muy bueno!!
Me fue de mucha ayuda. Era justo lo que estaba necesitando!
RetroFOX dice,
January 8, 2008 at 2:46
Bueno, de nada nuevamente. Es un placer que te haya servido. Saludos.
enZzo dice,
January 24, 2008 at 14:54
Olas!! broder, muy wen tutorial.. too bien pero como soy nuevo en esto como hago para elimanar, dejaste ahi el php para eliminar, como hago para linkear la imagen y envia direccion y la elimine.
Urgente.
SALUDOS
RetroFOX dice,
January 25, 2008 at 8:59
La verdad no recuerdo enZzo como lo hice en su momento, pero no creo que sea muy dificil. Debes buscar el nombre de la variable que le es pasado al script eliminar.php. Debes tener una línea similar a $_GET[’nombreArchivo’] … entonces para eliminar el archivo debes llamar a eliminar pasando por URL el nombre del archivo en cuestión; por ejemplo … eliminar.php?nombreArchivo=cara.png.
Si observar un poco el código podrías lograrlo sin problemas.
Saludos.
david dice,
January 31, 2008 at 21:06
Hola
Alguien sabe de algún servidor que soporte perl?
Ise un script de upload con barra de progreso pero no lo pude adaptar para php.
Gracias
RetroFOX dice,
February 5, 2008 at 17:47
es que si no puedes hacer correr tu script escrito en perl, no vas a poder realizar la barra de progreso porque PHP solo no puede hacerlo. Y no creo que un servidor te permita correr scripts en perl; salvo que el servidor sea tuyo.
Gracias por comentar.
smeerkahoven dice,
February 22, 2008 at 0:11
hola
RetroFox….quisiera hacerte muchas preguntas..y las voy a hacer
1.- Se puede cargar archivos sin utilizar el tag input type=file q html nos da?
2. SI existe una manera me podrias orientar ?
3. Lo q deseo hacer es una multiple carga de archivos…q el cliente solamente va ha ver las url para realizar el uploading :
/home/me/file1
/home/me/file1
/home/me/file1
y con un boton siguiente….se va a realizar la carga de los 3 archivos…sin utilizar el tag input type=file…
bueno..esperando respuestas…me despido
smeerkahoven
RetroFOX dice,
February 22, 2008 at 7:38
Hola smmerkahoven.
1) Creo que la única forma de enviar un archivo al servidor es solamente con el tag input type=file; no creo que exista otra manera en HTML.
2) Me imagina que otras tecnologías como flash tal vez podrían permitirte subir archivos al servidor, pero yo de flash poco y nada. Lo mismo con algún applet de java.
3) Yo he realizado cargas de múltiples archivos, pero siempre con el campo tipo file.
Saludos. Nos vemos.
ricocsharp(cuba) dice,
March 31, 2008 at 21:38
Bueno RetroFox muy bueno e ingenioso tu trabajo pero creo que como dice tu titulo al principio esto no tiene nada de ajax mas que es asincronico, mucha gente en el mundo del desarrollo web habla de AJAX y la mitad no sabe lo que realmente es, aqui les va una pequeña muelita(charlita) aclaratoria sobre el tema:
AJAX es un término “inventado” por Jesse James Garret para referirse a la utilización conjunta de las siguientes tecnologías:
Estándares de presentación: XHMTL y CSS
Interacción: DOM (Document Object Model)
Intercambio de datos: XML y XSLT
Interacción asíncrona con el servidor: XMLHttpRequest
Programación en el cliente: Javascript
osea que AJAX no es un lenguaje o una tecnologia , menos un standard es solo un modelo que adoptas o no, claro que como ves arriba la unica forma que en mi modesto conocimiento tienes de subir un file seria con el tag input type=file como bien dices arriba.claro con una pequeña aclaracion no para ti sino para los demas que leen esto buscando conocimiento este tag tambien conocido como fileUpload object es solamente una interfaz que permite al usuario especificar que fichero de su pc desea subir al server sin un CGI u otra tecnologia de servidor (ASP.net, ASP, JSP, JSF,COLD FUSION,PHP….. etc) este objeto no hace NADA
Damian dice,
April 1, 2008 at 8:46
Claro, tienes razón. Aportar conocimiento casi nunca suele estar de más.
SAludos y gracias.
Roberto dice,
April 18, 2008 at 0:48
Si dejas de ser egocentrico con siertas argumentos como “por lo menos conmigo lo lograron” y “La finalidad de este artículo es que le sea útil a alguien; principalmente a mi” el articulo hubiese quedado 100% perfecto ademas que falta de un poco mas de explicacion para los que no entendemos mucho de los iframe, gracias….
Ricardo dice,
April 18, 2008 at 0:51
Muy buen artículo y muy bien explicado, excelente.
Y una consulta si fuese que ademas de un archvo se puede ingresar datos de texto???
http://www.amanra.com
RetroFOX dice,
April 18, 2008 at 10:28
* Roberto … suerte.
* Ricardo: puedes subir los archivos que quieras, simeplemente debes modificar la parte de control del archivo. Saludos y Gracias.
Carlos Yerena dice,
April 22, 2008 at 19:02
antes que nada felicitarte por tu aportación, está información posiblemente la tomaste del libro “AJAX Web 2.0″ de Alfaomega. Pero la simplicidad con la que lo explicas es exepcional tanto para novatos como para gente con experiencia, de verdad muchas felicidades.
Solo como observación y por las dudas que muchos tienen es que web 2.0 en realidad no es Ajax, Ajax sólo es una parte, ya que web 2.0 en realidad es una fusión entre lo asíncrono, webservices y aplicaciones web enriquesidas.
AJAX no es una tecnología en si, sino el conjunto de tecnologías, estándares y lenguajes que ya existían junto con el objeto HTTPRequest que se encuentra como objeto en todos los navegadores que soporten javascript (navegadores actuales para no entrar en detalles de versiones).
AJAX es Asynchronous Javascript And Xml y fue impulsado por google, junto con los webservices para darle pauta a Web 2.0
Saludos a todos y felicidades por este post
RetroFOX dice,
April 23, 2008 at 10:09
Pues … gracias por tu comentario. Sin embargo debo decirte que no he tomado información del libro “AJAX Web 2.0″ ni mucho menos, si lo hubiese hecho estaría en los créditos del tutorial; allá de tu diplomacia me ha disgustado.
Nunca escuché hablar de ese Libro. Para dar fe de lo que digo, te dejo el link de un post de discusión del foro donde entre varias personas terminamos de entender esto. Ajax + Php + Upload Archivos. Mi nick en este foro es Calisco. Creo que habían un par de posts más relacionados con el tema.
Y fijate como termina el tutorial … Saludo muy grande a la gente de ForosDelWeb..
Saludos.
Carlos Yerena dice,
April 25, 2008 at 19:05
Mi intensión no fué de ninguna manera pedirte que comentaras la fuente ya fuera de libros o de alguna otra web ni nada por el estilo, solo hice el comentario de que como referencia (al tener yo el libro) de isar iframes para la carga de archivos. El único fin de mi comentario es el felicitarte por la manera tan sencilla en que lo explicas, ya sea que exista o no una fuente publicada en algún sitio, lo importante es que tienes la facilidad de explicar lo que otros autores y en otros foros lo hacen complicado u omitiendo partes importantes del funcionamiento.
No mal interpretes las intensiones que tienen un buen fin que es felicitarte por tu manual.
Como fe de erratas de mi parte el libro no es “AJAX Web 2.0″ sino “Introducción a AJAX con PHP” de editorial Anaya de Lee Babin.
Si e algún momento te sentiste ofendido por mi comentario, sinceramente te pido disculoas porque de ninguan manera fué el fin de esto.
Por último, la finalidad de mencionar el libro es por si alguien está interesado en tener una bibliografía en casa que hace referencia a la carga de archivos.
RetroFOX dice,
April 26, 2008 at 9:18
Ok, tenes razón; tal vez mal interpreté el comentario. Yo también te pido disculpas por la poca tolerancia y posible falta de comprensión. Agradezco tus elogios desde ya. Respecto a los libros, no los he leído; así que no puedo opinar.
Saludos y gracias.
Shiryu dice,
May 23, 2008 at 17:18
Genial, muchas gracias. Me has ahorrado mucho tiempo de investigación.
RetroFOX dice,
May 23, 2008 at 17:20
Gracias; como siempre digo, esa es la idea.
Saludos.
Franz dice,
June 4, 2008 at 18:31
q tal, uso este mismo codigo para subir archivos de excel xls, pero me no me recoje en la parte $_file[excel][tmp] me sale que no puede subirse al servidor, espero que me puedan ayudar ps gracias…
RetroFOX dice,
June 5, 2008 at 8:16
Deberías tratar de buscar el problema depurando tu script. Lo que te recomiendo es que implementes este ejemplo y una vez que funcione lo adaptes a tu necesidad. Simplemente tenes que cambiar el control de archivos.
Saludos y gracias por tu comentario.
Kender dice,
July 2, 2008 at 11:20
Me ha gustado mucho tu post. Yo hice algo parecido, pero mostraba el iframe y solo podia subir archivos de uno en uno
eso si, no fue una mala aproximacion ^_^
Lo que te keria comentar es que he encontrado una clase bastante chula en este enlace:
http://phpclasses.irontec.com/browse/package/2759.html
Es basicamente lo mismo, pero un poco mas elaborado y preparado para que solo haya que hacer llamadas a funciones de un objeto (ademas, esta programado con objetos, obvio, que es un paso mas). Yo voy a makearlo para introducirlo en mi aplicacion, añadiendole archivos de idioma y modificando las funciones de despues de la subida.
Échatelo un ojo que seguro qeu te gusta
RetroFOX dice,
July 2, 2008 at 12:17
Ok, le echaré un vistazo. Gracias por el dato. Saludos.