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);
Genial! Aunque en el proyecto que estoy trabajando uso Codeigniter. Como se aplica bajo el mencionado frameworks?
Gracias de antemano!
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?
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
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.
En esta URL tienes un ejemplo:
http://valums.com/ajax-upload/
me sale este error:
this._element is null
[Detener en este error] this._element.innerHTML = this._options.template;
— 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?
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?
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.
hola como se aplica este a un framework php???
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.
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
Haces lo mismo, solo que debes tener cuidado con las urls, el plugin usa formato de urls del tipo query : aaaa.php?param1=xxxx¶m2=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…
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;
usa el evento
onComplete: function(id, fileName, responseJSON){
/*** AQUI TIENES EL NOMBRE DEL ARCHIVO variable fileName ***/
},
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.
ya lo he solucionado muchas gracias por tu tiempo y dedicacion. Saludos!
Me alegra! saludos,
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.
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!