Subir archivos al servidor con AJAX y PHP sin plugins

/, geek, PHP/Subir archivos al servidor con AJAX y PHP sin plugins

jose_luis_francisco_cortes_ajax_y_phpEsta semana tengo el gusto de compartir el trabajo de José Luis Francisco Cortes – creador de cafeconweb.net blog dedicado a compartir soluciones de programación web – a quién conocí personalmente durante la charla que impartió Rasmus Lerdorf (Creador de PHP) en el #phpdaymx2013 y que es organizado por la Comunidad de PHP en México. De trato amable, simpático y aspecto relajado – nada que ver con el avatar de su cuenta en twitter @peckchan30 – y aunque no conozco su trabajo como desarrollador web, al leer sus artículos y platicar por algunos minutos con el me he dado cuenta que tiene la capacidad suficiente para realizar código de calidad y resolver las necesidades de proyectos de todo tamaño.

A continuación la contra parte a mi artículo jQuery para fotos utilizando AJAX UpLoad y PHP.

Subir archivos al servidor con AJAX y PHP sin plugins

Muchos desarrolladores aún tienen la idea de que no se pueden subir archivos al servidor mediante AJAX y nada es mas lejano a la realidad que esa idea.

Hay varios plugins de jQuery que permiten subir archivos sin recargar la pagina aunque muchos de estos plugins para mi gusto tienen características que no siempre implementamos en  los sitios que estamos trabajando, y pues ocupamos espacio en nuestro servidor con funcionalidades que no utilizamos.

Antes esto lo hacia con jQuery pero a partir de la versión 1.10 dejo de funcionar, así que opte por hacerlo al estilo “Vainilla JavaScript” y aquí el código para lograrlo:

Código HTML

Código javascript

Código PHP

Es importante comentar que esta solución funciona en todos los navegadores web modernos el único problema es que en IE funciona solo a partir de la versión 9. Aquí presentamos la funcionalidad básica pero es posible realizar mejoras según las necesidades de los proyectos que desarrollamos.

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
By | 2018-03-25T22:33:35+00:00 diciembre 3rd, 2013|Categories: Desarrollo Web, geek, PHP|Tags: , , |15 Comments
Desarrollador web front y back end, php, mysql, css3, html5, twitter bootstrap, jquery . . . twitero, bloguero, consultor de IT y padre de dos hermosos bodoques. Visita mi Perfil en Google +

15 Comments

  1. Victor 1 abril, 2014 at 1:35 PM

    Esta revisando tu codigo y me tira un error en el JavaScript que dice:

    SyntaxError: JSON.parse: unexpected token “<"

    Alguna idea? te ocurrio lo mismo, gracias por la atencion.

    • José Luis Francisco Cortes 8 abril, 2014 at 12:13 AM

      Hola! eso normalmente me pasa cuando en mi código php hay algun error, un warning o un notice que anda por ahí y rompe la estructura del JSON, y es por eso que javascript no lo puede interpretar como tal.
      Saludos!

    • Luis Fernando Cázares Bulbarela 8 abril, 2014 at 12:21 AM

      Buenas noches Victor, disculpa la tardanza en la respuesta, te pido verifiques el comentario que ha dejado José Luis.

      Saludos

    • cindy 1 octubre, 2014 at 3:37 PM

      Hola! lograste solucionar ese inconveniente? Es que me pasa exactamente lo mismo. Para que porfa me digas que hiciste!
      Graciass 🙂

  2. Noise Mandamiento 13 abril, 2014 at 10:21 PM

    Saludos tengo el codigo js dentro de las etiqueta head junto con el html .. y el codigo php en otro .. pero no me funciona .. pediría por favor la manera de ubicar correctamente los códigos 🙂 …
    }

    • Luis Fernando Cázares Bulbarela 15 abril, 2014 at 2:17 PM

      Hola buenas tardes, te sugiero sigas el tuto y hagas un debug con las herramientas para desarollo de tu navegador preferido de tal manera que puedas ubicar el error.

      Saludos

  3. aaron 22 abril, 2014 at 4:55 AM

    Hola,

    En el caso que deba de subir datos de unos campos de texto junto con los archivos, como enviaria la peticion?

    gracias!

  4. Juan Carlos 20 julio, 2014 at 1:10 AM

    NO FUNCIONA!: Una perdida de tiempo…………

  5. Diego 22 marzo, 2015 at 2:41 PM

    e sale este error Argument 1 of FormData.constructor does not implement interface HTMLFormElement.

  6. Pedro caro 29 julio, 2015 at 10:51 PM

    Gracias por tus tutos pero seria bueno retiraras los que no funcionan, hacen perder mucho tiempo.

Comments are closed.

Desarrollo Web

Silex - Sistema de Registro