jQuery para fotos utilizando Ajax UpLoad y PHP

/, Desarrollo Web, jQuery, PHP/jQuery para fotos utilizando Ajax UpLoad y PHP

Cuando comenzamos a desarrollar scripts avanzados y a utilizar tecnologías como ajax nos sale a relucir porque no es posible subir fotos a un servidor sin necesidad de recargar la página, esto se deriva de un error de seguridad en los navegadores. Ahora bien existe la posibilidad de emular esta acción mediante plugins, para esto crearemos nuestro jquery para fotos.

Para nuestro ejemplo jQuery para fotos emplearemos AjaxUpload.2.0.js en la versión que utiliza iframes y que podrás encontrar en su sitio oficial.

Sitio Oficial AjaxUpload

Al final del ejemplo te daré un par de plugins que pueden ser de utilidad para tus aplicaciones jquery para fotos y que son mas actuales.

Comúnmente nos encontramos tutoriales en donde nos enseñan a subir fotos de forma asíncrona, pero que pasa si lo que queremos es subir fotos y al mismo tiempo se vea reflejada en nuestra página, por ejemplo editar el perfil de un usuario y subir sus fotos, y que esta se vea en tiempo real en su respectivo contenedor, esto lo lograremos usando jquery para fotos.

En este pequeño tutorial – jquery para fotos – vamos a ver un ejemplo con las siguientes características:

  • Subir fotos
  • Fijar dimensiones de las fotos permitidas
  • Fijar el tamaño en kbs de las fotos
  • Fijar tipos de fotos que se pueden subir
  • Presentar en pantalla las fotos publicadas

Puedes descargar el código completo de jquery para fotos desde github

Video Tutorial

Para tener éxito en nuestro jquery para fotos usaremos HTML5, CSS3, jQuery y PHP, además del plugin antes mencionado.

HTML ( jquery para fotos)

Primero vamos a maquetar la plantilla con HTML, es importante tener en cuenta que se puede adaptar a cualquiera de sus diseños sin problema, posteriormente implementaremos jquery para fotos.

index.html

upLoad de fotos con Ajax


Publicando Fotografía…
Powered by Luis Fernando Cázares Bulbarela || 2012

En realidad es muy poco HTML el que necesitamos para maquetar nuestra plantilla, tenemos un contenedor de fotos id=”contenedorImagen”, una imagen por default id=”fotografia”, un botón id=”addImage” y un loader id=”loaderAjax”, esta es la parte medular para llevar a cabo las tareas en nuestro jquery para fotos.

EL gif animado que utilizaremos para nuestro jquery para fotos lo pueden obtener y/o crear a su gusto en ajaxload.info

Ahora vamos a dar un poco de estilo a nuestras etiquetas HTML mediante CSS, estamos a la mitad de nuestro jquery para fotos.

CSS ( jquery para fotos )

estilos.css

De igual manera el CSS es muy sencillo, simplemente estamos acomodando en nuestro jquery para fotos las etiquetas al centro y dando un poco de vista. Este archivo hay que incluirlo en nuestro index.html de la siguiente manera:

En mi caso cree una carpeta en la raíz llamada css y dentro coloqué el archivo estilos.css

Página de Inicio AjaxUpload

El siguiente paso en nuestro jquery para fotos es agregar las librerías jquery y ajaxUpLoad al archivo principal, lo hacemos ingresando las siguientes líneas dentro de la etiqueta <head></head>:

El siguiente paso es ingresar el javaScript que se encargará de crear dar funcionalidad al botón y llamar al php que realiza la tarea de publicación de las fotos. Este puede ir en el archivo index.html o inclusive se puede crear un archivo .js e incluirlo, depende de cada desarrollador como lo quiera hacer.

JavaScript

En el código mostrado lo que estamos haciendo es dar formato y funcionalidad a la etiqueta <button>

Este plugin para jQyery me gusta mucho porque esta muy sencillo ya que prácticamente son tres opciones las que debemos aplicar y configurar.

action: es para indicar a que archivo vamos a llamar cuando se seleccionan las fotos en cuestion.

onSubmit: aquí podemos mediante código javascript realizar varias tareas mientras se esta enviando la petición al servidor, en nuestro caso validamos la extensión del archivo, es importante que también la validemos del lado del servidor, esto para tener un poco mas de seguridad, lo veremos en el script PHP. Las tareas que se llevan a cabo son: validar la extensión del archivo a subir, mostrar el preLoader, cambiar el texto del botón y deshabilitar el botón, esto último para evitar el doble click.

onComplete: aquí es donde realizamos todas las acciones al momento de responder el servidor, en este caso se cambia el texto del botón, parseamos la cadena jSON que nos regresa el script PHP, en caso de ser positivo el upload de las fotos, lo que hacemos es remover el atributo scr y re insertarlo, ya con el nombre de las fotos que se han subido al servidor, ocultamos el preloader y habilitamos el botón nuevamente. En caso de no ser positivo el upLoad de las fotos simplemente mostramos un alert en donde mostramos el mensaje de error que traemos desde nuestro PHP.

Hasta este punto ya tenemos nuestro jQuery para fotos habilitado con el botón y listo nuestro javascript para realizar su cometido, ahora veamos el script PHP que se encargará de procesar la petición y regresar el resultado de esta.

Ejecutando AjaxUpload

PHP ( jquery para fotos)

uploadFile.php

Ire explicando cada conjunto de líneas y al final mostraré el código completo del jquery para fotos.

Instrucción para decir al script que se detenga un intervalo de tiempo, esto para poder apreciar el funcionamiento del ejemplo en un servidor local.

Definimos valores y límites que deben ser respetados por las fotos a subir, tamaño en KBs y dimensiones del archivo, además del nombre y url para guardarlo

Como lo comenté anteriormente no solamente basta con validar la extensión del archivo en el javascript, para esto existe la definición de tipos de archivo MIME que simplemente es la descripción del archivo y que comúnmente se usa del lado del servidor y es necesaria para este ejemplo de jquery para fotos.

Creamos un par de baderas para saber cuando se sigue ejecutando el script jQuery para fotos y un mensaje inicial.

Obtenemos la informacón del archivo que se esta subiendo, esto mediante la variable de servidor $_FILES[]

Extraemos la extensión del nombre de archivo y generamos el nuevo nombre del mismo, si se dan cuenta estoy agregado una marca de tiempo, esto debido a que al cambiar el atributo src con javascript no refresca, de tal manera que si el nombre del archivo es diferente lo hace sin problema.

Nota: La línea $imgFile = fileName.mktime().’.’.$extension[$num]; se modificó a $imgFile = fileName.time().’.’.$extension[$num];, esto enviaba un warning de php en tiempo de ejecución.

Validamos que el tamaño de la imagen sea correcto.

Ahora lo que hacemos es verificar si la bandera del tamaño de imagen tiene valor TRUE y ejecutamos la validación de tipo y peso en KBs, verificamos si el archivo existe en la carpeta temporal del servidor y finalmennte comprobamos si se pudo copiar a la carpeta que definimos al principio del script.

Armamos el array a convertir en cadena jSON y lo imprimimos.

A grandes rasgos lo que sucederá en nuestro jquery para fotos, cuando hagamos click en el botón Cambiar Imagen, se abrirar el diálogo para seleccionar un archivo, al aceptar este se intentará subir al servidor en donde nuestro script PHP se encargará de procesarlo y regresar un mensaje. El javascript procesará la cadena jSON y se encargará de enviar un mensaje de error o en su defecto cambiar la imagen que se muestra por default.

Foto Incial

Pantalla Final con foto

index.html ( jquery para fotos completo )

Sin duda alguna, en la red podremos encontrar varios tutoriales de jquery para fotos e inclusive plugins, aquí les dejo un par que pueden ser útiles dependiendo del enfoque que le quieran dar a sus aplicaciones, ambos son muy poderosos y adaptables a la mayoría de nuestras necesidades.

Uploadify (Versión gratis y de pago)

Link al sitio oficial

Web Site Uploadify

jQuery File Upload (versión gratis)

Link al sitio oficial

Sitio Oficial

By | 2018-03-25T22:33:41+00:00 julio 17th, 2012|Categories: CSS, Desarrollo Web, jQuery, PHP|Tags: |120 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 +

120 Comments

  1. Edwin León 23 agosto, 2012 at 11:09 AM

    El ejemplo muy bueno pero si lo pruebas en google chrome no te sirve, no te examina la carpeta

    • Luis Fernando Cázares 23 agosto, 2012 at 12:02 PM

      Hola Edwin buenas tardes, muchas gracias por tu comentario, estoy corriendo el ejemplo en chrome Versión 21.0.1180.82 para mac y me funciona perfectamente, sobre que plataforma lo estas ejecutando?

      • Gerardo 30 enero, 2013 at 10:31 AM

        Hola, Disculpa pero a mi tambien no me funciona en google chrome solo firefox no entiendo porque. me ayudarias con eso?.

        Gracias Saludos

        • Luis Fernando Cázares Bulbarela 30 enero, 2013 at 11:09 PM

          Hola buenas noches, claro que sí ya estuve revisando el código y encontré que hay que modificar esta línea $imgFile = fileName.mktime().'.'.$extension[$num]; por $imgFile = fileName.time().'.'.$extension[$num];

          Con esto debe funcionar a la perfección.

          También ya actualice la modificación en el github por si deseas descargarlo.

          Saludos

  2. Jean Piere 3 septiembre, 2012 at 5:12 PM

    man una info, una consulta como puedo usar este codigo para adiccionar un progressbar ya que si el cargamos un video o un archivo muy pesado te demanda mucho tiempo y no puedes determinar de un modo visual en cuento esta el proceso da carga te lo agredecira de antemano.

    Atte.

    JP

    • Luis Fernando Cázares 3 septiembre, 2012 at 5:26 PM

      Hola buenas tardes Jean checate la versión actualizadda del plugin Valums ajaxupload esta trae ya la implementación del progress bar.

      Muchas gracias por leer mis tutriales

      Saludos

  3. […] y demás códigos insertados llegó el momento de escribir el primer post ya con optimización, jQuery para fotos utilizando Ajax UpLoad y PHP y la verdad si fue un poco complejo repetir cierta palabra mas de 30 veces, pero de nueva cuenta lo […]

  4. Nancy 19 septiembre, 2012 at 4:21 PM

    Hola Luis!!

    Descargue el ejemplo para cargar fotos mediante Ajax Upload, solo que al momento de que le doy click al botón de cargar imagen y elegirla se queda en Publicando Fotografía y no la muestra pero al verificar en la carpeta images la imagen que cargue si esta. Hay algo que necesite configurar en mi servidor que no este tomando en cuenta????

    Saludos!!!

    • Luis Fernando Cázares 19 septiembre, 2012 at 5:23 PM

      Hola buenas tardes Nancy muchas gracias por contactarme, por lo que me comentas hace todo el trabajo pero no te cambia el texto del botón, te pediría por favor verifiques esta parte, la primera línea es la que se encarga de cambiar el texto:

      onComplete: function(file, response){
      btn_firma.text('Cambiar Imagen');

      respuesta = $.parseJSON(response);

      if(respuesta.respuesta == 'done'){
      $('#fotografia').removeAttr('scr');
      $('#fotografia').attr('src','images/' + respuesta.fileName);
      $('#loaderAjax').show();
      // alert(respuesta.mensaje);
      }
      else{
      alert(respuesta.mensaje);
      }

      $('#loaderAjax').hide();
      this.enable();
      }

      Por otro lado del lado del servidor únicamente tienes que cambiar los permisos de la carpeta images a 777

      Saludos

  5. David 14 octubre, 2012 at 10:40 PM

    Hola Luis,

    Espero todo ande bien, una pregunta, casi igual a la de Nancy, lo que sucede es que funciona de maravilla el ejemplo que has puesto, siempre y cuando el script de php no marque error, me despliega bien el cargador dice el texto “Archivo cargado con éxito”, etc. Pero cuando pasa un error en el script de php se queda el loader activo y nunca se despliega el error, lo probé en tu script y para hacer la prueba de error intencionalmente quite los permisos de la carpeta y aun así se queda el loader y no me despliega el error, sabes a que se debe?

    Saludos Cordiales

    • Luis Fernando Cázares Bulbarela 15 octubre, 2012 at 10:30 AM

      Hola David, buenos días, muchas gracias por seguir mis tutoriales, me da mucho gusto sean de utilidad para la comunidad, el error proviene de que el script esta esperando cierto tipo de respuesta, mas no los mensajes kilométricos de texto que arroja el servidor y php cuando hay un error, el asunto aqui es prevenir esos errores por lo menos en servidores de producción, esto se hace con la función ini_set de PHP

      Recibe un cordial saludo y te deseo un excelente inicio de semana

      • David 15 octubre, 2012 at 12:48 PM

        Te agradezco tu comentario Luis, muchas gracias por tu pronta respuesta, recibe un cordial saludo.

  6. Gonzalo 15 octubre, 2012 at 9:56 AM

    Hola Luis!

    Me interesa usar esta herramienta, descargue todo y al usarlo no deja de salirme el mensaje de error ” Verifique el tamaño de la imagen” más allá que aumente los valores de ancho y alto máximos o suba fotos super pequeñas. Que podrá ser?

    Saludos!

    • Luis Fernando Cázares Bulbarela 15 octubre, 2012 at 10:20 AM

      Hola buenos días Gonzalo, muchas gracias por seguir mis tutoriales, muy contento de que te sean de utilidad, checate el valor de esta variable define(“maxUpload”, 50000); en el archivo php, este es el tamaño y esta en kbs, modificalo a tus necesidades.

      Excelente inicio de semana

      Saludos

      • Gonzalo 15 octubre, 2012 at 10:58 AM

        Se me escapó esa línea… era eso!
        Lo que si ahora no deja de mostrar el gif de loading y no realiza la carga. Ya revise los permisos de la carpeta images y saque el sleep(3) del principio del PHP.

  7. Juan 18 octubre, 2012 at 3:02 PM


    Gonzalo:

    Se me escapó esa línea… era eso!
    Lo que si ahora no deja de mostrar el gif de loading y no realiza la carga. Ya revise los permisos de la carpeta images y saque el sleep(3) del principio del PHP.

    me pasa exactamente lo mismo no logro hacer correr el ejemplo por mas que lo he probado en Firefox, Chrome y IE pero nada se que en el gif de cargar pero no hace nada… no carga la imagen en la carpeta ni nada…

    revisando la consola de errores me percate de que tira este error

    Error: SyntaxError: JSON.parse: unexpected character

    si me pudieras ayudar con eso desde ya gracias…

    • Luis Fernando Cázares Bulbarela 19 octubre, 2012 at 9:41 AM

      Hola buenos días Juan, muchas gracias por seguir mis tutoriales, te invito a descargar el ejemplo completo desde mi repositorio de de GitHuB a ver si te funciona, te recomendaría que verificaras también si la instalación de tu PHP esta habilitada para JSON.

      Que tengas un excelente fin de semana.

      • Juan 22 octubre, 2012 at 6:51 AM

        Gracias Luis comprobare lo de PHP y le cuento… gracias de nuevo

  8. Luis Hernandez 19 octubre, 2012 at 5:01 AM

    Que tal Luis,
    muchas gracias por el tutorial, ya implemente el ajaxUpload y funciona a la perfeccion. Solamente que tengo un problema… Tengo el area donde darle click abrira la venta para seleccionar el archivo y arriba de esa area pasa un . El problema esta en que si le doy click al se abre la venta para seleccionar el archivo, pero yo quiero que esa venta se abra solamente cuando se da click en el area para subir imagenes. Te paso el link http://iguanadonate.com/addPro.php?idPro=21
    El div que te comento es la barra de navegacion que se encuentra con posicionamiento absolute y se mueve junto con el scroll.

    Saludos y gracias de antemano!

    • Luis Fernando Cázares Bulbarela 19 octubre, 2012 at 9:48 AM

      Hola Luis buenos días, me da mucho gusto ver que mis tutoriales son de utilidad para la comunidad, por lo que alcanzo a ver es que estas aplicando el botón al id que contiene toda la imagen, prueba aplicandolo a una de las imágenes, si gustas podemos hacer un hangout y lo vemos en pantalla.

      Excelente fin de semana

  9. Juan 22 octubre, 2012 at 7:31 AM

    Fecha y hora: 22/10/2012 9:32:25
    Error: SyntaxError: JSON.parse: unexpected character
    Archivo de origen: http://localhost/u/js/jquery-1.7.2.min.js
    Línea: 2

  10. Juan G Lopez 23 noviembre, 2012 at 5:57 PM

    Hola Luis, en primer lugar queria agradecerte por compartir este ejemplo ya que es justamente lo que necesitaba, algo sencillo!, tengo una pregunta haber si depronto sabes como hacerlo.

    quisiera poder hacer que el ajax upload fuera para varios ids

    algo como:

    var btn_firma = $(‘#uploadFile1, ‘#uploadFile2’, ‘#uploadFile3’), interval;
    new AjaxUpload(‘#uploadFile1’, {………

    De antemano muchas Gracias.

    • Luis Fernando Cázares Bulbarela 23 noviembre, 2012 at 9:18 PM

      Hola buenas noches Juan, muchas gracias por tus comentarios, fíjate que he intentado hacer lo que me comentas y lamentablemente debes crear el js por cada ID, la verdad es que no pasa nada al crearlos, no se alenta ni mucho menos, lo que si es que debes cuidar los nombres de las variables en cada uno.

      Saludos

  11. clever 29 noviembre, 2012 at 10:37 AM

    hola amigo buebn ejemplo quisiera saber como hago para guardar 3 imageenes al a vez y como hago para que esto me guarde la imagen ${_files solo m guarda el post

    function GrabarDatos(){

    var nombres = $(‘#nombres’).attr(‘value’);
    var imagen = $(‘#imagen’).attr(‘src’,’images/’+ ‘value’);
    var imagen1 = $(‘#imagen1’).attr(‘value’);
    var imagen2 = $(‘#imagen2’).attr(‘value’);
    var precio = $(“#precio”).attr(“value”);
    var cate = $(“#cate”).attr(“value”);

    $.ajax({
    url: ‘nuevo.php’,
    type: “POST”,
    data: “submit=&nombres=”+nombres+”&imagen=”+imagen+”&imagen1=”+imagen1+”&imagen2=”+imagen2+”&precio=”+precio+”&cate=”+cate,
    success: function(datos){
    ConsultaDatos();
    alert(datos);
    $(“#formulario”).hide();
    $(“#tabla”).show();
    }
    });
    return false;
    }

    • Luis Fernando Cázares Bulbarela 29 noviembre, 2012 at 1:58 PM

      Hola buenas tardes Clever, si deseas subir mas de una imagen al mismo tiempo te recomiendo usar jQuery File UpLoad, en cuanto al guadado de la imagen te recomendaría descargue el código completo de este ejemplo en Mi repositorio gitHu y lo ejecutes en tu servidor web para que veas como funciona.

      Saludos

  12. Diana 8 diciembre, 2012 at 2:26 PM

    Hola buena tarde, esta muy interesante el video tutorial gracias por compartir tus conocimientos, baje el ejemplo pero tengo me sale el siguiente error: SyntaxError: JSON.parse: unexpected character, en chrome Versión 23.0.1271.95 m y firefox 17.01 sale SyntaxError: JSON.parse: unexpected character, en ambos casos se queda cargando la imagen. Ya revise la version del php y esta habilitada la opcion de json tambien la carpeta images tiene los permisos 777.

    Muchas gracias.

    • Luis Fernando Cázares Bulbarela 8 diciembre, 2012 at 8:41 PM

      Hola Diana buenas noches, muchas gracias por visitar mi sitio, ummmm podrías verificar si tienes register_globals en on, recuerda que debe estar en off.

      Por otra parte supongo que adaptaste el código para alguna aplicación propia, si es así te aconsejo corras el original y lo revises línea a línea con el tuyo.

      Saludos

    • Camilo ernesto ruiz vidal 24 diciembre, 2012 at 8:41 AM

      ps yo estuve revisando el codigo y encontre muchos errores, por tal motivo me tome el atrevimiento de modificar el codigo….
      he aqui el codigo por si quieren descargarlo:
      http://www.mediafire.com/?le1wwnk6zbbzz82

      • Luis Fernando Cázares Bulbarela 25 diciembre, 2012 at 11:40 AM

        Muchas gracias por los comentarios Camilo, en cuanto tenga un tiempesillo lo abro para ver los errores y mejorar el código

        Saludos

      • Rob Mraz 19 enero, 2013 at 5:06 PM

        Hola amigo, revisé tu código y me percate que si realiza bien las cosas, pero te sobrescribe la anterior imagen con la nueva, sucediendo pues, que le pone el mismo nombre siempre y solo sube la ultima y borra las anteriores. Revisando el código.

        • Luis Fernando Cázares Bulbarela 20 enero, 2013 at 8:43 PM

          Hola Rob buenas noches, muchas gracias por tus amables comentarios, en caunto a lo de sobre escribir las imágenes, si te refieres al nombre del archivo que sube, según yo en esta línea crea el nombre del archivo con una marca de tiempo

          // Creamos el nombre del archivo dependiendo la opción
          $imgFile = fileName.mktime().'.'.$extension[$num];

          Si gustas verificar. . .

          Saludos

  13. Joel 19 junio, 2013 at 5:43 PM

    saludos, quisiera saber si se puede poner que no importa el tamano de la foto que subas, por que algunos usuarios no sabran cambiar el tamano de la foto manual para poder subir la imagen. gracias se que se cambia aqui:
    define(“maxUpload”, 50000);
    define(“maxWidth”, 2500);
    define(“maxHeight”, 345);
    define(“uploadURL”, ‘../images/’);
    define(“fileName”, ‘foto_’);

    • Luis Fernando Cázares Bulbarela 19 junio, 2013 at 6:04 PM

      Hola buenas tardes Joel, a ver si entiendo tu comentario, lo que sugieres o propones es que al desarrollar tu app sea permitido que el usuario final suba fotos del tamaño que sea, si es así, es importante tomar en cuenta que eso te puede causar problemas, a final de cuentas la aplicación se desarrolla para un fin en especifico y se basa en requerimientos mínimos y máximos, por ejemplo, acabo de liberar un sistema para control de exposiciones y el cliente requiere que se suba un archivo, pero solo debe ser .psd, .ai o .pdf y el peso <= 3 MB. Supongo que estas empresas deben tener su departamento de diseño que adecua dichos archivos a las exigencias del sistema. Es muy importante que al desarrollar una aplicación otorgues una buena experiencia de navegación y uso, en muchas de las ocasiones los usuarios finales no intervienen en la configuración de la misma. Saludos

  14. Joel 21 junio, 2013 at 1:20 AM

    Luis, Gracias Por Responder.

    En Realidad Lo que dices es muy cierto, pero no me referia a eso, me referia al tamano de la imagen osea
    las dimenciones:

    define(“maxWidth”, 2500);
    define(“maxHeight”, 345);

    Estas dos lines especifican el tamano que permite el sistema, pero me gustaria saber como eliminar esas dimenciones especificas, es mejor que no tenga un tamano espesifico, a eso me referia.

    Espero Tu Respuesta y me ayudes a modificar tu script, gracias…

    • Luis Fernando Cázares Bulbarela 21 junio, 2013 at 11:16 AM

      Ahhhh ya entendí, sólo tienes que suprimir la validación en esta parte del código

      // Verificamos el tamaño válido para los logotipos
      if($imageSize[0] == maxWidth && $imageSize[1] == maxHeight)
      $pasaImgSize = true;

      // Verificamos el status de las dimensiones de la imagen a publicar
      if($pasaImgSize == true)
      {

      }

      Saludos

  15. Joel 21 junio, 2013 at 2:27 PM

    Luis, Hola De Nuevo, Quisiera saber como sacar la ruta, osea mostrarla debajo de la imagen cuando carga osea que aparesca cuando cargue la imagen:

    Ejemplo:

    RUTA: http://Localhost/imagen/foto_02302.jpg

    Quisiera saber Ese Proceso eh estado creandole ese paso, lo que intento hacer es que despues que cargue la imagen, pase la variable de la ruta de la imagen y nombre del archivo.

    Gracias Espero tu respuesta…
    Saludos Desde Rep. Dom.\

    • Luis Fernando Cázares Bulbarela 21 junio, 2013 at 10:41 PM

      Hola buenas noches Joel, en esta parte del código doy salida

      $salidaJson = array("respuesta" => $respuestaFile,
      "mensaje" => $mensajeFile,
      "fileName" => $fileName);

      Tendrías que hacer algo como esto:

      $salidaJson = array("respuesta" => $respuestaFile,
      "mensaje" => $mensajeFile,
      "fileName" => $fileName,
      "Url_file" => "http://tu_ruta/" . $fileName);

      Y ya podrías plasmarla en donde tu gustes.

      Saludos

  16. Erick R 21 junio, 2013 at 3:42 PM

    hola Luis buenas tardes, saludos de vzla,
    Brot, felicitaciones por el codigo esta muy bueno y lo estoy usando, pero tengo una duda con el nombre del archivo, a ver si me ayudas.
    guarde en base de datos una foto con cierto nombre y quiera solo sustituir la imagen pero que el nombre no cambie sino se mantenga la imagen, como una sobreescritura de imagen. me podrias asesorar como seria????

    • Luis Fernando Cázares Bulbarela 21 junio, 2013 at 10:46 PM

      Hola buenas noches Erick, muchas gracias por seguir mi trabajo, en cuanto a lo que me preguntas, en este ejercicio solo muestro como hacer el upLoad, para hacer lo que necesitas, ya entra la parte de edición de un registro, te explico:
      Suponiendo que ya estas en el registro en el que deseas actualizar la imágen, lo que debes hacer es traer en una variable el nombre actual de la imágen, al cargar la nueva, debes ponerle ese nombre y subirla, esto sobre escribe el archivo existente.
      Si te das cuenta en mi ejemplo utilizo una marca de tiempo en el nombre del archivo, esto para prevenir la sobre escritura, en tu caso tendrías que omitir ese paso.

      Saludos

  17. Joel 21 junio, 2013 at 11:10 PM

    Luis, Gracias de Nuevo.

    Eso Que me explicaste ya lo puse en practica, pero lo que quiero es que muestre la url debajo de la imagen una vez cargada la imagen, en verdad de jquery no se mucho.

    Espero que me ayude ahi.

    Gracias.

  18. Joel 21 junio, 2013 at 11:37 PM

    Ya Mi hermano Pude Resolver ese problema, lo unico que tuve que hacer fue lo siguiente:

    inserte un campo input tipo text y en el script esto $(“#unInput”).val(‘upload/’ + respuesta.Url_file);

    todo nitido, gracias..

  19. Erick 30 junio, 2013 at 9:03 AM

    Gracias brot por la respuesta, pude solucionarlo con un session, y aunque ya carga el archivo como lo necesito, ahora tengo otro inconveniente.
    Supongamos que quiera actualizar la foto donde esta alojado la imagen con un nombre cualquier (erick.jpg por ejemplo en la carpeta archivos). luego de una consulta, aparece el archivo erick.jpg primero y cuando le doy a cargar foto el finaliza el proceso completo pero no me recarga la foto nuevamente a menos que le de un f5 para recargar la imagen. por lo menos sigue manteniendo el nombre que es lo que me interesa pero es un poco tedioso visualizar la imagen asi.
    probe con unlink en el codigo php antes de pasar la imagen para cargar la imagen nueva, funciona el proceso pero no recarga tampoco aunque si guarda la foto.
    le monte una animacion en el bloque oncomplete de tu codigo a ver si faltaba eso y nada.

    que podria ser brot????

  20. Erick 30 junio, 2013 at 9:56 AM

    Pero como haria brot para mostrar la foto nuevamente? por que ahora no me aparece la nueva a menos que presione F5?

    • Luis Fernando Cázares Bulbarela 30 junio, 2013 at 10:04 AM

      Hola, es problema del caché del navegador por lo cual yo cambio el nombre del archivo, de lo contrario no lo vas a lograr, bueno por lo menos a mí me pasó así.

      Saludos

  21. rodrigo 1 agosto, 2013 at 7:56 PM

    mira muchas gracias por tu aporte es de muuuy gran ayuda pero como hago para guardalrlo en mysql soy novato en esto y me gustaria saber porque fuciona perfectamente Gracias de antemano

    • Luis Fernando Cázares Bulbarela 6 agosto, 2013 at 12:00 PM

      Hola buenas tardes Rodrigo, el concepto es el siguiente, una vez que se concreta el upload deberías incluir la función que se encargue de guardar el nombre del archivo en una tabla, debes considerar que para poder jalarla después debes amarrar con un idde tu registro.

      Saludos

  22. Alan Christian 8 agosto, 2013 at 3:03 PM

    Hola Luis, hace un tiempo que estoy intentando usar tu ejemplo en un portal, pero no me funciona, crees que puedas ayudarme a implementarlo, ya que solo le he dado cortar y pegar y modifique los ids de las secciones para que funcionara pero pues no me funciona. Agradezco de antemano

  23. Dante 15 agosto, 2013 at 2:31 PM

    Hola Luis, buenas tardes, estoy haciendo un desarrollo y necesito utilizar tu script.
    He hecho todo como comentas y al hacer click en el boton, no me abre la ventana para navegar y elegir la foto. Bajé de GitHub el ejemplo y sigue sin andar. Me podrías ayudar? gracias

    • Luis Fernando Cázares Bulbarela 15 agosto, 2013 at 11:46 PM

      Hola buenas noches Dante, dime algo, si ejecutas mi código sin hacerle cambios no funciona?, ummmm por un lado hay que ver que navegador estas utilizando puede que vaya por ahí o checate si te tira algún error javascript cuando haces click en el botón, esto lo puedes verificar con firebug.

      Saludos

  24. rodrigo 19 agosto, 2013 at 2:29 PM

    enserio no entiendo como debes de guardar la imagen ose pones un insert exactamente a donde? es que soy novato

    • Luis Fernando Cázares Bulbarela 19 agosto, 2013 at 5:45 PM

      Hola Rodrigo buenas tardes, te refieres a guardar el nombre de la imágen en una base de datos?

      Saludos

  25. rodrigo 19 agosto, 2013 at 10:40 PM

    si osea guardarlo como dices que hay que ingresar la funcion cuando se hace el upload ¿donde se ejecuta el upload? y como hago para guardar el nombre des pues como tu dices que solo tengo que hacer la consulta por el id esa si pero por lo demas de guardar el nombre no se como ayudame….

    • Luis Fernando Cázares Bulbarela 20 agosto, 2013 at 10:04 AM

      Hola Rodrigo, mira el asunto aquí es determinar cual es la funcionalidad y la lógica de tu módulo, me gustaría saber que es lo que quieres hacer y en base a eso te puedo sugerir como hacerlo.

      Saludos

  26. Camilo Ruiz 23 agosto, 2013 at 4:21 PM

    Muchas gracias, este codigo me ha servido de mucho. Lo unico es que cada quien lo adapta a las necesidades que tiene y lo mejora para el fin que requiere…

    • Luis Fernando Cázares Bulbarela 26 agosto, 2013 at 6:57 PM

      Hola Camilo muchas gracias por tus amables comentarios, que bueno que mi trabajo te ha sido de utilidad.

      Saludos

  27. Marco Antonio 27 agosto, 2013 at 1:17 PM

    Hola Luis buenos dias. antes q nada agradecerte por éste trabajo q tanto nos ayuda a nosotros q apenas vamos empezando y a los tambien avanzado. sabes tengo mi pagina estoy desarrollando y estoy tratando de incluir esta utilidad, pero el problema es q cuando quiero abrir la imagen hace un “onSubmit” y me manda a guardar lo q hay en la pagina. habra manera de cargar la imagen sin que tenga q hacer un “onSubmit”? gracias de antemano x la ayuda

    • Luis Fernando Cázares Bulbarela 27 agosto, 2013 at 10:13 PM

      Hola buenas noches Marco Antonio, te recomiendo poner todo lo referente al upload fuera de tu formulario y el resultado del upload lo cooias a un campo dentro del formulario de datos.

      Saludos

  28. Federico 2 septiembre, 2013 at 10:41 PM

    Hola Luis! Primero gracias por el código! Para hacer un insert en una base de datos con el nombre de la imagen, donde debería colocar el query?
    Lo he probado en varios lados y no logro hacerlo funcionar! Gracias de antemano!!

    • Luis Fernando Cázares Bulbarela 2 septiembre, 2013 at 11:06 PM

      Hola Federico gracias por tus comentarios, para guardar la imágen un una db tienes que implementar el query ya que se haya completado el proceso de upload para ser exactos en esta parte del código

      if(move_uploaded_file($_FILES['userfile']['tmp_name'], uploadURL.$imgFile))
      {
      $respuestaFile = 'done';
      $fileName = $imgFile;
      $mensajeFile = $imgFile;
      // Aquí debes hacer la implementación de tu guardado en la base de datos
      }

      Saludos

  29. Alexis Rebolledo 9 septiembre, 2013 at 3:50 PM

    Hola Luis, espero que estes bien. Necesito implementar un formulario para cargar archivos, pero a la vez, validar cada campo, la idea es subir una pdf y agregarle un comentario. Es para una central de apuntes, yo he seguido casi todos tus videos, y trate de hacer el formulario con jquery validation como lo haz echo tu en ejemplos de llenado de formularios. El problema es que jquery validarion no valida este tipo de campos. He probado con uploadify y con dos o tres mas, pero solo encuentro ejemplos en que validan la extension de los archivos y no el llenado de los demas campos, la idea es que estos sean obligatorios. Agradeceria tu ayuda para orientarme como debo realizarlos, que ya me estoy volviendo loco, jajajaja, saludos y gracias desde ya.

  30. luis miguel 14 octubre, 2013 at 12:19 PM

    amigo gracias por el aporte, pero me sale error de este tipo SyntaxError: JSON.parse: unexpected character, y segun me dicen es por los permisos a la carpeta donde alojo las imagenes, yo estoy trabajando en un servidor local con xampp, y la carpeta tiene todos los permisos, o existe alguna forma de ponerlo a 777 que no se.

    y otra cosa, donde usas la variable $archivo que esta junto a estas variables.
    // Obtenemos los datos del archivo
    $tamanio = $_FILES[‘userfile’][‘size’];
    $tipo = $_FILES[‘userfile’][‘type’];
    $archivo = $_FILES[‘userfile’][‘name’];////////////////////////////////////////////////7

    gracias y estare esperando su respuesta.

    • Luis Fernando Cázares Bulbarela 14 octubre, 2013 at 5:58 PM

      Hola Luis muchas gracias por seguir mi trabajo, en cuanto al error, debe haber un error de sintaxis, checa linea por línea posiblemente sea alguna , o ;

      También puedes hacer un debug con firebug.

      Saludos

  31. luis miguel 14 octubre, 2013 at 12:20 PM

    cabe indicar que estoy en plataforma de windows…..

    • Luis Fernando Cázares Bulbarela 14 octubre, 2013 at 5:59 PM

      La otra cosa que debes verificar es si estas codificando a json una cadena o array correcto.

      Saludos

  32. freddy 31 octubre, 2013 at 3:16 PM

    Hola, te felicito por tus tutoriales, son excelentes todos y muy bien explicados, solo tengo una duda con respecto a este tutorial:

    Se puede implementar el upload de las imagenes dentro de un dialog de jquery? porque lo probé asi como tu lo hiciste y funciona perfecto, luego lo implementé dentro de un dialog jquery y no funcionó, me da la impresión que no se puede hacer, a menos que esté obviando algo.

    De antemano gracias y felicidades de nuevo por los tutoriales.

    • Luis Fernando Cázares Bulbarela 1 noviembre, 2013 at 1:00 PM

      Hola buenas tardes Freddy, agradezco mucho tus comentarios, y su si es posible meter el upload en una ventana modal.

      Saludos

  33. Roner Borg 3 noviembre, 2013 at 8:57 PM

    saludo deseo crear un sistema que pueda seleccionar en que carpeta subir la imagen y no que todas se suban al mismo lugar quiero si esto se pude… tengo creado una carpeta para cada usuario y quiero que al registrarse suba su foto y se guarde en su carpeta que la función se repita igual con cada registro

    • Luis Fernando Cázares Bulbarela 3 noviembre, 2013 at 9:44 PM

      Hola buenas noches Roner, muchas gracias por seguir mi trabajo y aplicarlo a tus proyectos, en cuanto a lo que deseas hacer, te sugiero que de alguna manera por usuario guardes su ruta para que cuando ingresen y suban su foto puedas indicar en que carpeta sean guardada.

      Saludos

  34. […] Al final del día tuve que investigar y realizar un arduo trabajo para que publicaciones como jQuery para fotos utilizando Ajax UpLoad y PHP no perdieran posicionamiento en navegadores y afortunadamente y con ayuda de tres plugins para […]

  35. Eduardo 30 noviembre, 2013 at 12:30 PM

    Hola Luis, intento probar el ejemplo y me aparece el error de dimensiones de la imagen, modifiqué las constantes de tamaño y dimensiones y nada :/ por favor necesito ayuda. saludos!

    • Luis Fernando Cázares Bulbarela 2 diciembre, 2013 at 9:36 PM

      Hola buenas noches, checate tu if si no le falta un signo = en la comparación, por otro lado te sugiero imprimas el largo y ancho de tu imagen para que veas que valores te esta arrojando.

      Saludos

  36. Eduardo 30 noviembre, 2013 at 2:07 PM

    Otra consulta, trato de guardar en la bdd el nombre de la foto, en la sección donde dices, pero obtengo un error json.parse, saco la query y todo funciona, cómo lo hago?

    • Luis Fernando Cázares Bulbarela 2 diciembre, 2013 at 9:37 PM

      Hola buenas noches Eduardo, lo mas seguro es que este pasando mal los valores imprime el contenido de tus variables apra que te des una idea por donde puede estar el error.

      Saludos

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

  38. Pablo 21 enero, 2014 at 9:41 AM

    Hola Luis, me ha sido de mucha utilidad…
    lo he utilizado para cargar una imagen y guardar el filename en base de datos, y funciona perfecto,
    ahora necesito hacer lo mismo pero para que suban un archivo .doc o .pdf, me podrias decir como hacer para utilizar el mismo uploadfile.php?
    muchas gracias

    • Luis Fernando Cázares Bulbarela 23 enero, 2014 at 10:19 PM

      Hola buenas noches Pablo, muchas gracias por tus ambles comentarios, básicamente debes modificar los tipos mime y las extensiones tanto en javascript como en el php.

      Javascript

      onSubmit : function(file , ext){
      if (! (ext && /^(jpg|png)$/.test(ext))){
      // extensiones permitidas
      alert('Sólo se permiten Imagenes .jpg o .png');
      // cancela upload
      return false;
      } else {
      $('#loaderAjax').show();
      btn_firma.text('Espere por favor');
      this.disable();
      }
      },

      PHP

      $fileType = array('image/jpeg','image/pjpeg','image/png');

      Saludos

  39. luis oduber 5 marzo, 2014 at 5:34 PM

    buenas noches, soy de veenzuela amigo, estoy intentando subir imagenes al servidor con ajaupload, ya logro subirlas. mi pregunta esta la funcion que tengo declarada la tengo declara para un link con un id llamado upload, quiero llamar esa misma funcion pero con otro link que el id sea upload 2 por ejemplo sin tener que volver a declarar la funcion para upload2 espero puedan ayudarme, de antemano gracias.

    • Luis Fernando Cázares Bulbarela 6 marzo, 2014 at 2:38 PM

      Hola buenas tardes Luis, debes duplicar todo el código de ajax upload, me refiero a la función javascript que hace el trabajo de subir el archivo ya con el nuevo id.

      Saludos

  40. luis oduber 6 marzo, 2014 at 3:41 PM

    hola amigo luis, muchas gracias por la información, eso exactamente era lo que quería evitar, quería que fuera un solo código dinámico para cada link (id diferente) que hiciera click se ejecutara, psss, ni modo sera duplicarlo. gracias por la información compañero muy amable.. saludos

    • Luis Fernando Cázares Bulbarela 6 marzo, 2014 at 4:53 PM

      La verdad es que lo he intentado en dos ocasiones y no he podido sacarlo, es cuestión de dedicarle un poco de tiempo, aunque puedes utilizar el mismo botón para subir n archivos, depende mucho del uso y la funcionalidad que desees darle.

      Saludos

  41. Denis Amorín 18 marzo, 2014 at 9:12 AM

    Hola Luis, sabes que quiero cargar la imagen en un formulario para luego cargarlo en la DB pero al oprimir el botón de cargar la imagen, actúa como si oprimiera el Submit del formulario con method post. Cómo puedo arreglar eso?
    Desde ya muchas gracias!
    Te paso el código del form:

    … Otros campos…

    Elegir imagen

    Publicando Fotografía…

    Volver

    • Luis Fernando Cázares Bulbarela 18 marzo, 2014 at 1:36 PM

      Hola buenas tardes Denis, es un error de programación, debes verificar bien si no tienes un error en tu programación javascript, comúnmente es una coma o algo por el estilo.

      Saludos

  42. Andres Gomez 9 abril, 2014 at 10:23 AM

    Buen recurso, muchas gracias!

  43. Formulario con ajax upload, php y mysql 12 abril, 2014 at 8:43 PM

    […] En jQuery para fotos utilizando Ajax UpLoad y PHP desarrollamos un botón para publicar una imagen al servidor y mostrarla en pantalla, este ejemplo básico es la pauta para implementar esta funcionalidad en formularios mas complejos, por ejemplo, en Sistemas de Registro en Línea – registro de trabajos libres o inscripciones con fotografía – que implican que los datos sean guardados en una base de datos incluyendo el nombre del archivo en cuestión. […]

  44. cristopher 21 abril, 2014 at 11:32 AM

    Uncaught SecurityError: Failed to read the ‘contentDocument’ property from ‘HTMLIFrameElement’: Blocked a frame with origin “null” from accessing a frame with origin “null”. Protocols, domains, and ports must match.

    Será por permisos?

  45. Enrique Salinas 8 mayo, 2014 at 2:22 PM

    Luis, como estas agradecerte por tu ayuda, cuando corro el programa me sale en mensaje
    error en tiempo de ejecución JavaScript Acceso Denegado
    te agradecería mi

    • Luis Fernando Cázares Bulbarela 8 mayo, 2014 at 2:45 PM

      Hola buenas tardes Enrique, recuerda que debes cambiar los permisos de la carpeta en donde se almacenan los archivos.

      Saludos

  46. Enrique Salvas 9 mayo, 2014 at 1:49 AM

    Luis como estas gracias por tu respuesta,
    Error en tiempo de ejecución de Microsoft JScript: Acceso denegado

    en este segmento del AjaxUpload.2.0.min.js :
    var W = R.contentDocument ? R.contentDocument : frames[R.id].document

    alli es donde tengo el problema que me sugieres, gracias

    • Luis Fernando Cázares Bulbarela 9 mayo, 2014 at 10:41 AM

      Hola Enrique buenos días, veo que es un error de explorer, no me lo tomes a mal, mi recomendación es que lo descartes y utilices FireFox y/o Chrome.

      Por otro lado ese error nunca lo había visto, tal vez sea bueno goglees para buscar la solución.

      Saludos

  47. Cristian 19 mayo, 2014 at 8:05 PM

    Que tal Luis … Aplicando el AjaxUpload .. en un ejemplo mio .. intento realizar que la ejecucion del submit del file se omita … agregando autoSubmit: false …. para que me cargue el archivo una vez dado click en el boton guardar el cual contiene la funcion para almacenar los demas datos. el asunto es que he agregado una variable “var uploader = new AjaxUpload(……….)” y en la funcion de guardar … e intentado ejecutar mediante el (uploader.submit(); uploader.enable();) pero no tengo resultados .. Gracias de antemano .. por alguna sugerencia

  48. Danny García 20 junio, 2014 at 11:05 AM

    Hola Luis.

    En primer lugar muchas gracias por tus tutoriales.

    Todos me han salido bien, no tengo ninguna queja, mi petición o duda es:

    ¿Cómo podría implementar que me re dimensione una imagen, es decir, que la imagen que yo suba por ejemplo de tamaño 400 x 400, cambiarla a 200 x 200?.

    Implementar esto dentro del código que nos has proporcionado.

    Muchas gracias.

  49. Robyir Loreto 14 agosto, 2014 at 1:58 AM

    Hola a todos… corro el sitio pero hago click en el boton y no examina para seleccionar el archivo de imagen…. estoy usando firefox en Linux fedora 20

    • Luis Fernando Cázares Bulbarela 14 agosto, 2014 at 10:59 PM

      Hola Robyir muchas gracias por seguir mi trabajo, seguramente hay algún error de programación, no se si descargaste el código desde mi repositorio de github.

      Saludos

  50. Facundo 15 octubre, 2014 at 8:55 PM

    Hola Luis te quería consultar como puedo hacer para subir varias imágenes con distintos inputs, y luego guardar la url de las imágenes en una bd SQL, también guardar las imágenes en la carpeta del servidor.
    Muchas gracias.
    Muy bueno el aporte.

  51. Andtes 20 octubre, 2014 at 12:40 PM

    Hola Luis que tal amigo, te escribo a ver en que puedes ayudarme, estuve revisando un sistema viejo que tenia, y migre de appserv a wamp para actualizar y porque necesitaba incluir algunos eventos a la bd que el appserv por estar desactualizado no me lo permitía con la versión del mysql. Ahora bien en mi sistema tengo un modulo para subir imágenes a la bd, en este sentido yo lo que guardo es la ruta en la bd como una cadena y almaceno la imagen en una carpeta, antes de esto tengo una vista previa de las imágenes que me permite eliminar la imagen de la carpeta y seleccionar otra antes de guardar la ruta en la bd. Por algún motivo esto no está funcionando y he intentado ya varias cosas, no soy muy experto en Javascript y creo que por allí viene el rollo, si me echaras una mano te lo agradecería.

    • Luis Fernando Cázares Bulbarela 7 noviembre, 2014 at 10:54 PM

      Hola buenas noches Andrés disculpa la tardanza en contestar tu mensaje, el problema tal vez sea de permisos en las carpetas o en su defecto algún ruta que hayas movido, para mi es un tanto complicado sugerir algo pues no veo el error como tal. Te sugiero corras tus scripts or separado, por ejemplo, ha el de upload y checa si funciona bien, luego, trata de eliminar la imagen de forma directa con la función de php y ve si funciona y así te vas paso a paso.

      Saludos

  52. Carlos 15 noviembre, 2014 at 1:50 PM

    Hola Luis! Queria hacerte una consulta estoy intentando implementar el uploader en un servidor web. No es necesario crear una base de datos para implementar esto? Pregunto ya que no veo nada sobre la base de datos. Queda cargando la imagen pero no la muestra. Gracias

    • Luis Fernando Cázares Bulbarela 15 noviembre, 2014 at 7:36 PM

      Hola buenas noches Carlos, muchas gracias por seguir mis artículos, con respecto a la base de datos depende mucho de tu requerimiento, debes plantear que es lo que necesitas y para que lo vas a utilizar posteriormente, por lo general guardo en una tabla el nombre del archivo subido ya que lo utilizaré para consultas y así.

      Saludos

  53. Mario MOreno 19 noviembre, 2014 at 11:08 PM

    Hola esta muy bueno gracias, pero tengo una duda como después de cargar la foto, en el caso de una publicación saber cual es para registrarla la publicación en una base de datos.

    • Mario MOreno 19 noviembre, 2014 at 11:30 PM

      Algo mas claro puse por ejemplo tres fotos, aparte después lleno los demás datos del formulario y publico.

      ¿Cómo identificar la ruta y nombre para mostrar la imagen correspondiente a la publicación?

      Muchas gracias

      • Luis Fernando Cázares Bulbarela 20 noviembre, 2014 at 10:38 AM

        Buenos días Mario, ya siendo mas específicos y de la mano de lo que puntualizamos en tu comentario anterior debes de armar la estructura de esas publicaciones de tal manera que en un registro guardes toda la información necesaria para mostrar. Supongo que estas creando un mini CMS y por ende las entradas las generas por medio de un formulario.

        Saludos

    • Luis Fernando Cázares Bulbarela 20 noviembre, 2014 at 10:36 AM

      Hola Mario buenos días, en este caso uno define las rutas y forzosamente se tienen que almacenar en una tabla de bases de datos.

      Saludos

  54. Osvaldo uriel 14 mayo, 2015 at 11:14 PM

    Buenas excelente tuto me ayudo mucho, si quisiera enviar un dato extra en el envió (un id) o cambiar el nombre de la imagen ¿como le haría? lamento mi duda tan sencilla pero soy novato en esto de javascrip

    • Luis Fernando Cázares Bulbarela 21 mayo, 2015 at 10:18 AM

      Hola Oswaldo me parece que en este tuto dice donde se cambia el nombre, con respecto a pasar un id no me queda claro donde lo quieres hacer.

      Saludos

  55. miguelanggel 8 junio, 2015 at 6:37 PM

    Hola oye amigo gracias muy bueno me ha servido de mucho saludos

  56. Osvaldo 5 enero, 2016 at 11:12 AM

    Buenas excelente tutorial pero me surgió un inconveniente el cuál es que el evento focus y por consiguiente keypress no sirven o al menos yo no encontrado como hacerlos funcionar si alguien sabe como me sería de gran ayuda

    • Osvaldo 5 enero, 2016 at 11:38 AM

      Ya lo resolví tan solo en el evento keypress de addimg se dispara el evento click del input que se crea, que tiene por propiedad name=userfile.

  57. Anthony 20 diciembre, 2016 at 11:33 AM

    Muy bueno tu ejemplo, gracias me sirvió mucho de ayuda para mi proyecto, tenia la duda de como aplicarlo para un formulario, de manera de mandar todos los datos que sean suministrados en el mismo, pero ya encontré la forma y la manera de manejar todo esos datos incluyendo la imagen mediante este script… muchas gracias saludos…!

Comments are closed.

Desarrollo Web

Silex - Sistema de Registro