Diego Di Camillo

Base de tips para problemas comunes de los desarrolladores.



Upload archivos con AJAX sin recargar la pagina

17Mar11

La siguiente es un excelente plugin para subir archivos mediante AJAX, sin recargar la pagina.
Entre sus caracteristicas, este plugin permite:

– Subir varios archivos a la vez
– Subir archivos con solo arrastrar y soltar (drug & drop) en FF y Chrome
– No requiere recargar pagina
– Accion a realizar post-subida archivo (por cada uno que es subido)
– Monitorizar porcentage de subida por cada archivo que se esta subiendo
– Permitir solo ciertas extensiones de archivos
– Limitar tamaños de archivos
– El plugin JS no consume ninguna js-frame como JQUERY, MOOTOOLS ni PROTOTYPE, por lo tanto no produce incompatibilidad con sitios que utilicen estas js-frame.

Primero que nada aqui podes bajarte el plugin y ver demos:

http://valums.com/ajax-upload/

Como se utiliza:

En el HTML que quieras poner el BOTON de UPLOAD para subir los archivos, debes colocar esto:

Luego, agregamos el control js:






	

La parte visual ya esta configurada.

Ahora solo resta configurar el archivo que maneja el upload en este caso el php.php , en el debemos definir la carpeta de subida, esto esta al final del archivo. en la linea:

//se define desde la raiz , este dir debe tener permisos de escritura.
$result = $uploader->handleUpload('/home/user/public_html/uoload/');

Eso es todo lo necesario para usarlo, si al subir un archivo debes grabar en la base de dato algo , debes utilizar el evento onComplete con una funcion js que realice una llamada ajax como esta:

function loadFotosExtras(id,fn){
	
/// utilizo prototype.js
			
			var url = 'procesa_ajax.php';
			var params = 'opc=loadFotosExtras&id='+id+'&fn='+fn;
    		         var ajax = new Ajax.Request( url, {
                                      method:"get",
    								  parameters: params,
									  onLoading: function(){  $('fotos').innerHTML = 'Cargando fotos...';  },
    								  onComplete: function(resp){ $('fotos').innerHTML = resp.responseText; }
									  }
     		);
			
}

Luego el procesa_ajax.php contiene el codigo php que graba datos a la base de datos:

/** incluyo el archivo que conecta a la db **/
require_once('connection.php');
$id 			= $_GET['id'];
$fn 			= $_GET['fn'];
 /** inserto en la base de datos, en $db tengo la conexion a la base de datos. **/
   $sql = "INSERT INTO  multimedia (idproducto, src, nombre, thumb) VALUES
					 ($id, '$fn', '$fn', '$fn')";
   $res = mysql_query($sql,$db);
Archivado en: configuraciones, General, HTML, Nuevas Tecnologias, Productos open source, Web 2.0   |  20 Comentarios

20 comentarios a “Upload archivos con AJAX sin recargar la pagina”  

Feed de este artículo URI para Trackbacks
  1. 1 racsovzla en Jun 30th, 2011 dijo:

    Genial! Aunque en el proyecto que estoy trabajando uso Codeigniter. Como se aplica bajo el mencionado frameworks?

    Gracias de antemano!

  2. 2 Daniel Ortiz en Ago 22nd, 2011 dijo:

    No he podido hacer funcionar ese Upload.

    He seguido sus instrucciones pero aun asi no me ha funcionado.

    Me puede dar un ejemplo, algunos archivo que le han funcionado?

  3. 3 ddicami en Ago 22nd, 2011 dijo:

    Bueno algunos tips para que controles si esta OK:

    1- Ves el boton rojo que dice Hacer clic para subir archivos?

    NO 1.a – Verificar la ruta al archivo fileuploader.js 1.b colocaste un div id=»file-uploader-demo1″ donde se cargara la region upload?

    SI
    2- Verifica lo resaltado en negrita:

    element: document.getElementById(‘file-uploader-demo1‘), //este es el ID del div que contendra el boton rojo
    action: ‘js/upload/php.php‘, // este es el archivo que maneja la subida de archivos, debes ver la carpeta de subida

    3.- En el archivo php.php debes verificar el path donde se subirá el archivo ¿existe? ¿tiene permisos de escritura? ¿tienes luegar en el servidor?

    Espero te sirva

  4. 4 joel en Sep 15th, 2011 dijo:

    Hola, como esta tu articulo esta muy bueno.

    Podrias por favor, enviarme un mail con el programa .zip
    para poder ejecutarlo y verlo correr en mi sistema.

    Gracias por todo.

  5. 5 ddicami en Sep 15th, 2011 dijo:

    En esta URL tienes un ejemplo:
    http://valums.com/ajax-upload/

  6. 6 swos en Oct 30th, 2011 dijo:

    me sale este error:

    this._element is null
    [Detener en este error] this._element.innerHTML = this._options.template;

  7. 7 ddicami en Oct 31st, 2011 dijo:

    — definimos que la capa id = ‘file-uploader-demo1’ sea un objeto FileUploader, y colocamos algunas configuraciones —

    Significa que debes poner un DIV con id=»»file-uploader-demo1″ lo has puesto?

  8. 8 jose luis en Nov 12th, 2012 dijo:

    hola, he modificado el php.php y otras cosas pero no se sube el archivo, habilitando el debug me da este error:

    Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 24576 bytes) in C:\xampp\htdocs\scripts\fileuploader\php.php on line 219

    el servidor tiene 24gb de ram y 1tb de espacio, realmente le sobra. Tienes idea por que puede ser el problema?

  9. 9 ddicami en Nov 12th, 2012 dijo:

    Jose luis, el problema es que el servidor esta tratando de realizar el upload de la imagen que debe ser muy pesada, (4 / 5 / 6 megabytes) y el servidor corta la ejecucion por el parametro :
    max_upload_size
    o bien por demasiado tiempo de ejecucion:
    max_execution_time

    Tenes dos opciones:
    1 cambias el valor de estos parametros (si lo permite el servidor) utilizando la primitiva ini_set();
    2 achica el tamaño y peso de la foto antes de enviarla al servidor, recuerda que luego aunque el servidor la suba , para la web NUNCA una imagen es optima en ese peso, debe optimizarse.
    Deberias utilizar algun algoritmo de redimensionamiento. Hay miles.

  10. 10 moe en Nov 12th, 2012 dijo:

    hola como se aplica este a un framework php???

  11. 11 jose luis en Nov 12th, 2012 dijo:

    hola, he solucionado el problema que te habia comentado, el tema era que habia descomentado la linea require entonces entraba en un bucle infinito y llenaba la memoria disponible para la ejecución de scripts. Ahora el tema es el siguiente, tienes idea como puedo hacer o de donde puedo capturar el nombre del archivo que estoy subiendo? pues necesito pasarlo a un campo del tipo text para después guardarlo en una bd con otros datos. He probado varias cosas pero no logro dar con el nombre del archivo. Alguna idea?. Desde ya muchas gracias por tu tiempo.

  12. 12 jose luis en Nov 12th, 2012 dijo:

    Hola, ya he solucionado eso, tienes idea como puedo hacer para que cuando subo un archivo me ponga en un input del tipo text el nombre del archivo?. He probado varias cosas pero no puedo dar con el. Desde ya muchas gracias por tu tiempo

  13. 13 ddicami en Nov 13th, 2012 dijo:

    Haces lo mismo, solo que debes tener cuidado con las urls, el plugin usa formato de urls del tipo query : aaaa.php?param1=xxxx&param2=yyyyy de esta manera.

    Si el framework tiene otro formato de urls, debes poner el php que atiende la llamada ajax, en la raiz del sitio…

  14. 14 ddicami en Nov 13th, 2012 dijo:

    En esta funcion :

    function createUploader(){
    var uploader = new qq.FileUploader({
    element: document.getElementById(‘file-uploader-demo1’),
    action: ‘js/upload/php.php’, // este es el archivo que maneja la subida de archivos, debes ver la carpeta de subida
    // Limite tamaño en bytes
    // No funciona en todos los navegadores
    sizeLimit: 0, // max size
    minSizeLimit: 0, // min size

    // validation
    // ex. [‘jpg’, ‘jpeg’, ‘png’, ‘gif’] or []
    allowedExtensions: [‘jpg’, ‘jpeg’, ‘png’, ‘gif’], //solo archivos img, si no lo quieres solo comenta esta linea

    // eventos
    // cuando se terminana de subir cada archivo , podemos hacer algo como una llamada a una funcion JS AJAX que haga algo. con el archivo
    el id pasado es el numero de archivo subido
    onComplete: function(id, fileName, responseJSON){

    /*** AQUI TIENES EL NOMBRE DEL ARCHIVO variable fileName ***/

    },
    onProgress: function(id, fileName, loaded, total){},
    onCancel: function(id, fileName){},

    //indica si tirara un mensaje de error cuando algun error se produce
    debug: false
    });
    }

    //se crea el Uploader cuando el archivo se carga.
    window.onload = createUploader;

  15. 15 ddicami en Nov 13th, 2012 dijo:

    usa el evento
    onComplete: function(id, fileName, responseJSON){
    /*** AQUI TIENES EL NOMBRE DEL ARCHIVO variable fileName ***/
    },

  16. 16 jose luis en Nov 13th, 2012 dijo:

    Hola, antes que nada gracias por tomarte tu tiempo. Te cuento que habia probado eso ya pero devuelve una cadena vacía. Lo saque obteniendo el contenido innerHTML del span al que agrega el nombre y lo marca en verde cuando se sube, pero el tema es que si el nombre del archivo es muy largo lo achica agregando puntos suspensivos y no me sirve dado que necesito el nombre completo. Alguna idea?. Muchas gracias por la buena onda.

  17. 17 jose luis en Nov 13th, 2012 dijo:

    ya lo he solucionado muchas gracias por tu tiempo y dedicacion. Saludos!

  18. 18 ddicami en Nov 13th, 2012 dijo:

    Me alegra! saludos,

  19. 19 swos en Ene 5th, 2013 dijo:

    La varible «fileName» no jala el nombre del file subido.

    onComplete: function(fileName){

    $(‘#newautorbanner’).val(fileName);

    }

    Lo que quiero es que el nombre del file se almacene en el hidden «newautorbanner»; pero no jala el nombre.

    Espero tu rpta.
    Gracias.

  20. 20 ddicami en Ene 7th, 2013 dijo:

    Amigo , buenas tardes, la declaracion de la funcion onComplete es :

    function(id, fileName, responseJSON)

    como ves, el primer parametro es ID , el segundo es fileName, ahi debería jalar el nombre del archivo.

    Suerte!

Enviando tu Comentario
Por favor espera

Deja una respuesta

Hubo un error con tu comentario, por favor intenta de nuevo.



Comparte este artículo

  • Menéame  Menéalo
  • del.icio.us  Enviar a Del.icio.us
  • Mi Yahoo!  Agregar a Mi Web 2.0
  • Furl  Guardar en Furl
 


wordpressk2openswitchyukei.netfeedwordpress