Subir Multiples Archivos Ajax jquery
Categories: AJAX - Tags: AJAX, jquery, PHPSiempre recordemos que no se puede subir archivos usando AJAX, porque el objeto ajax no soporta el enctype requerido para subir archivos asi que se usa un iframe para emular el proceso. Voy a explicar como hacer esto con jquery y ajax
El formulario para subir archivos
1 2 3 4 5 6 7 8 9 | <form action="upload.php" id="frm_uploader" name="frm_uploader" method="post" enctype="multipart/form-data"> <ol> <li><label>Name:</label><input type="text" id="cfname" name="fname" size="30" class="required" /></li> <li><label>E-mail:</label><input type="text" id="cfemail" name="femail" size="30" class="required email" /></li> <li><label>Select Files</label><input name="ffoto[]" type="file" class="multi" accept="gif|jpg|jpeg|png|pdf|zip|rar|ai|eps|mp3|avi|wmv|mpg|mpeg|cdr" /></li> <li><p align="center"><input type="submit" name="submit" value="Upload Now" class="btn" /></p></li> </ol> </fieldset> </form> |
AJAX Jquery
Incluimos las librerias javascript, el script automaticamente buscará el campo con la clase multi
1 2 | <script language="javascript" src="js/jquery-1.31.js"></script> <script language="javascript" src="js/jquery.MultiFile.pack.js"></script> |
PHP para recibir los archivos
Este script permite subir multiples archivos como un array, asi que empezemos por ahi
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?php $cuales=""; /// Vemos cuantos archivos hemos subido $nro=count($_FILES["ffoto"]["name"]); /// Empezamos el array for ($i=1; $i<$nro; $i++) { $file_name=$_FILES["ffoto"]["name"][$i]; $file_size=$_FILES["ffoto"]["size"][$i]; $file_type=$_FILES["ffoto"]["type"][$i]; if($file_name!=""){ // verifica carpeta $nombre_archivo=$_POST['femail']; if (!file_exists('userfiles'.$nombre_archivo)) { mkdir('userfiles/'.$nombre_archivo,0777); } $path="userfiles/".$nombre_archivo; // sube archivo copy($_FILES["ffoto"]['tmp_name'][$i], $path.'/'.$file_name) ; echo '<p align="center">Your file <b>'.$file_name.'</b> was successfully uploaded</p>'; $cuales.=$file_name." "; } else { echo '<br><br><p align="center"><b>Error with '.$file_name.'</b></p>'; } |
Puedes decargar este plugin jquery y ver mas ejemplos desde la pagina de su creador
Hola, he intentado mas de 10 veces dejarte un comentario, pero los “capchas” que aparecen son totalmente imposibles de identificar, son “demasiado seguros” jaja, inténtalo a ver si soy yo que estoy ya mal de la vista. Lo que quería era agradecerte el post de la subida múltiple de ficheros con el plugin de jQuery, me viene de perlas. Muchas gracias.
Si, tienes razon ya estaba muy complicado ese captcha, ahora esta mucho mas legible
Hola sabes, he encontrado un error en el código php para que funcione el for debe empesar en 0.
Ahora no logro que la libreria js me realice el upload de forma automatica, alguna idea???
Hola quisiera saber si es posible conocer el tamaño del archiv antes de hacer el submit, esto con el fin de crear una barra de progreso haciendo constantes consultas del tamaño que va teniendo el archivo mientras se sube y comparandolo con el tamaño total a subir.
Si saben algún método diferente les agradecería que me lo dijerán teniendo en cuenta que necesito subir multiples archivos.
Esta chevere esto de la subida de fotos soy un poco principiante pero ahi le estoy dando de ante mano gracias por el aporte felicitaciones