Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Cargando Archivos Con Ajax

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Leareny Guerrero (you can also view the original English article)

Parece que no puedo llegar al final de las cosas divertidas que puedes hacer con las tecnologías web emergentes. Hoy, voy a mostrarte cómo hacer algo que -hasta el último momento- no ha tenido precedentes: subir archivos a través de AJAX. 

Oh, claro, ha sido pirateado; pero si eres como yo, y te sientes sucio cada vez que escribes iframe, te va a gustar mucho esto. Únete a mí después del salto!

¿Buscando una Solución Rápida?

Si está buscando una solución rápida, hay una gran colección de scripts y aplicaciones de carga de archivos en Envato Market.

Este cargador de archivos HTML5 es particularmente ingenioso - puede agregar archivos fácilmente arrastrándolos y soltándolos o haciendo clic. Todos los archivos se subirán vía AJAX o se pueden agregar dentro de un formulario, y los archivos pueden renombrarse antes de cargarlos. ¡Una solución genial y rápida si eso es lo que estás buscando! 


¿Por qué no nos dan las malas noticias con? 

Esto no funciona en todos los navegadores. Sin embargo, con alguna mejora progresiva (o cualquiera que sea la palabra de moda actual), tendremos una página de carga que funcionará de regreso a IE6 (aunque sin los bits AJAXy).

Nuestra carga AJAX funcionará siempre que FormData esté disponible; de lo contrario, el usuario obtendrá una carga normal. 

Hay tres componentes principales para nuestro proyecto. 

  • El atributo multiple en el elemento de input de archivo.
  • El objeto FileReader de la nueva API de archivos.
  • El objeto FormData de XMLHttpRequest2.

Usamos el atributo multiple para permitir al usuario seleccionar múltiples archivos para cargar (la carga de múltiples archivos funcionará normalmente incluso si FormData no está disponible). Como verá, FileReader nos permite mostrar las miniaturas de usuario de los archivos que están cargando (esperaremos imágenes).

Ninguna de nuestras tres características funciona en IE9, por lo que todos los usuarios de IE obtendrán una experiencia de carga normal (aunque entiendo que el soporte para `FileReader` está disponible en IE10 Dev Preview 2). FileReader no funciona en la última versión de Safari (5.1), por lo que no obtendrán las miniaturas, pero recibirán la carga de AJAX y el mensaje de confirmación. Finalmente, Opera 10.50 tiene soporte para FileReader pero no soporte para FormData, por lo que obtendrán miniaturas, pero cargas normales.

Con eso fuera del camino, ¡vamos a codificar!


Paso 1: El Marcado y El Estilo

Comencemos con un marcado y un estilo básicos. Por supuesto, esta no es la parte principal de este tutorial, no te trataré como un novato. 

El HTML

Bastante básico, ¿eh? Tenemos un formulario que se publica en upload.php, que veremos en un segundo, y un elemento de entrada único, de tipo file. Tenga en cuenta que tiene el atributo booleano multiple, que le permite al usuario seleccionar múltiples archivos a la vez.

Eso es todo lo que hay que ver aquí. Movámonos.

El CCS

Absolutamente no hay desastres aquí. 


Paso 2: El PHP

También debemos poder gestionar las cargas de archivos en el back-end, así que cubramos eso a continuación. 

upload.php

Tenga en cuenta que estas fueron las primeras líneas de PHP que escribí fácilmente en un año (soy un chico de Ruby). Probablemente deberías estar haciendo un poco más por seguridad; sin embargo, simplemente nos aseguramos de que no haya errores de carga. Si ese es el caso, usamos el archivo construido en move_uploaded_file incorporado para moverlo a una carpeta de uploads . No olvides asegurarte de que la carpeta permita escribir.

Entonces, ahora mismo, deberíamos tener un formulario de carga activo. Eliges una imagen (múltiples, si quieres y tu navegador te permite), haz clic en el botón "Subir archivos" y obtienes el mensaje "Imágenes Cargadas con Exitosamente".

Así es como se ve nuestro mini proyecto hasta ahora:

The styled form

Pero, vamos, es 2011: queremos más que eso. Notarás que hemos vinculado jQuery y un archivo upload.js. Vamos a romper eso ahora.


Paso 3: El JavaScript

No perdamos el tiempo: ¡aquí vamos! 

Aquí es con lo que comenzamos. Creamos dos variables: input es nuestro elemento de entrada de archivo; formdata se usará para enviar las imágenes al servidor si el navegador lo admite. Lo inicializamos en false y luego verificamos si el navegador admite FormData; Si lo hace, creamos un nuevo objeto FormData. Además, si podemos presentar las imágenes con AJAX, no necesitamos el botón "Subir imágenes!", Así que podemos ocultarlo. ¿Por qué no lo necesitamos? Bueno, vamos a subir automáticamente las imágenes de forma automática después de que el usuario las seleccione. 

El resto del JavaScript irá dentro de su función de autoinvocación automática anónima. A continuación, creamos una pequeña función auxiliar que mostrará las imágenes una vez que el navegador las tenga: 

La función toma un parámetro: la fuente de la imagen (veremos cómo lo conseguiremos pronto). Luego, simplemente buscamos la lista en nuestro marcado y creamos un elemento de lista e imagen. Configuramos la imagen fuente para la imagen fuente que recibimos, colocamos la imagen en el elemento de la lista y colocamos el elemento de la lista en la lista. ¡Listo!

A continuación, tenemos que tomar las imágenes, mostrarlas y cargarlas. Como ya dijimos, haremos esto cuando se active el evento onchange en el elemento de entrada.

No tenemos que preocuparnos por el modelo de evento patentado de IE, porque IE9 + es compatible con la función addEventListener estándar. 

Hay más, pero comencemos con esto. En primer lugar, no tenemos que preocuparnos por el propietario de IE del modelo de eventos, porque IE9 + admite la función addEventListener estándar (y IE9 y Down no son compatibles con nuestras nuevas funciones).

Entonces, ¿qué queremos hacer cuando el usuario ha seleccionado los archivos? Primero, creamos algunas variables. Lo único importante en este momento es len = this.files.length. Los archivos que el usuario ha seleccionado serán accesibles desde el objeto this.files. En este momento, solo nos preocupa la propiedad length, así que podemos recorrer los archivos ...

... que es exactamente lo que estamos haciendo a continuación. Dentro de nuestro ciclo, configuramos el archivo actual en un file para facilitar el acceso. Lo siguiente que hacemos es confirmar que el archivo es una imagen. Podemos hacer esto comparando la propiedad type con una expresión regular. Estamos buscando un tipo que comience con "imagen" y sea seguido por cualquier cosa. (El doble golpe delante solo convierte el resultado en booleano).

Entonces, ¿qué hacemos si tenemos una imagen en nuestras manos? 

Verificamos para ver si el navegador admite la creación de objetos FileReader. Si lo hace, crearemos uno. 

Aquí está como usamos un objeto FileReader: Vamos a pasar nuestro objeto de file al método reader.readAsDataURL. Esto crea una url de datos para la imagen cargada. Sin embargo, no funciona de la manera que podrías esperar. La URL de datos no se pasa de la función. En cambio, la url de datos será parte de un objeto de evento. 

Con esto en mente, necesitaremos registrar una función en el evento reader.onloadend. Esta función toma un objeto de evento, por el cual obtenemos la url de datos: está en e.target.result (sí, e.target es el objeto reader, pero tuve problemas al usar el reader en lugar de e.target dentro de esta función) . Solo vamos a pasar esta url de datos a nuestra función showUploadedItem (que escribimos arriba). 

A continuación, verificamos el objeto formdata. Recuerde, si el navegador es compatible con FormData, formdata será un objeto FormData; de lo contrario, será false. Entonces, si tenemos un objeto FormData, vamos a llamar al método append. El objetivo de un objeto FormData es mantener los valores que envía a través de un formulario; Entonces, el método deappendsimplemente toma una clave y un valor. En nuestro caso, nuestra clave son las images[]; al agregar los corchetes al final, nos aseguramos de que cada vez que append otro valor, en realidad lo agreguemos a esa matriz, en lugar de sobreescribir la propiedad de la image.

Ya casi hemos terminado. En nuestro ciclo for, hemos mostrado cada una de las imágenes para el usuario y las hemos agregado al objeto formdata. Ahora, solo tenemos que subir las imágenes. Fuera del ciclo for, aquí está la última pieza de nuestro rompecabezas:

De nuevo, tenemos que asegurarnos de tener soporte con FormData; si no lo hacemos, el botón "¡Subir archivos!" estará visible, y así es como el usuario cargará las fotos. Sin embargo, si tenemos compatibilidad con FormData, nos encargaremos de cargarlo a través de AJAX. Estamos utilizando jQuery para manejar todas las rarezas de AJAX en todos los navegadores.

Probablemente estés familiarizado con el método $ .ajax de jQuery: le pasas un objeto de opciones. Las propiedades de URL, type y success deberían ser obvias. La propiedad de data es nuestro objeto de formdata. Observe esas propiedades processData y contentType. De acuerdo con la documentación de jQuery, processData es true de manera predeterminada, y procesará y transformará los datos en una cadena de consulta. No queremos hacer eso, por lo que establecemos esto como false. También configuramos contentType en false para asegurarnos de que los datos lleguen al servidor como lo esperamos.

Y eso es. Ahora, cuando el usuario carga la página, ve esto: 

Tutorial Image

Y después de que seleccionen las imágenes, verán esto: 

Tutorial Image

Y las imágenes han sido cargadas: 

Tutorial Image

¡Esto es todo!

Subir archivos a través de AJAX es genial, y es genial que estas nuevas tecnologías lo admitan sin la necesidad de largos ataques. Si tiene alguna pregunta sobre lo que hemos hecho aquí, ¡marque esos comentarios! ¡Muchas Gracias Por Leer!

Y si aún necesita ayuda con este u otro problema de codificación, encuentre soporte en Envato Studio.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.