Escrito por: Martín el 28-12-2010 08:15:02 y leído 4013 veces

Siempre se nos da el caso que necesitamos subir muchas imágenes o archivos a una noticia o post de nuestro blog, entonces, mediante jQuery, tenemos una solución para no hacer de uno en uno el proceso de subida de ficheros y es una subida múltiple de ficheros a la vez.

Vale... y ¿Cómo se usa?
Pues es muy fácil, además de agregar la librería jQuery a nuestro código, declararemos el input file como siempre, con la diferencia de que su nombre debe contener algunas características especiales tales como:

Corchetes
Sí, el nombre del input file debe contener corchetes []... ¿Por qué? Porque así le diremos a nuestro formulario que nuestro input file es un array y contendrá múltiples ficheros a la vez.

¿Cuántos ficheros?
Nuestro input deberá tener otro atributo dentro de su código que sea el maxlenght=XX donde XX será el número de ficheros máximo que queremos dejar subir

¿Y las extensiones?
Si queremos limitar la subida de ficheros a determinadas extensiones, no tenemos más que agregar otro atributo oculto que es el accept, y cada extensión debe ir separada por un barra vertical |, tal que: accept=´gif|jpg|doc´, y así todas las extensiones que dejemos que nuestro usuario suba.

¿Cómo accedo a los ficheros subidos?
Pues fácilmente, debes recorrer el array que se ha generado con los archivos subidos y hacer cuanta acción necesites para cada fichero dentro del foreach (en PHP) que recorrerá ese array.

Los códigos
Los códigos que muestro a continuación nos muestran, en el 1) agregando los javascripts y declarando el class de nuestro input que será múltiple, en el 2) como sería nuestro input y en el 3) como acceder al array de ficheros utilizados.

Me lo descargo...
Visita esta web donde tienes el plugin necesario y más explicaciones de las que yo di

Código JAVASCRIPT

/*
 ### jQuery Multiple File Upload Plugin v1.47 - 2010-03-26 ###
 * Home: http://www.fyneworks.com/jquery/multiple-file-upload/
 * Code: http://code.google.com/p/jquery-multifile-plugin/
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 ###
*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}(';3(X.1M)(6($){$.7.2=6(h){3(5.Q==0)8 5;3(R U[0]==\'1f\'){3(5.Q>1){l i=U;8 5.N(6(){$.7.2.14($(5),i)})};$.7.2[U[0]].14(5,$.27(U).26(1)||[]);8 5};l h=$.L({},$.7.2.D,h||{});$(\'21\').1D(\'2-S\').V(\'2-S\').1i($.7.2.15);3($.7.2.D.12){$.7.2.1s($.7.2.D.12);$.7.2.D.12=11};5.1D(\'.2-1a\').V(\'2-1a\').N(6(){X.2=(X.2||0)+1;l e=X.2;l g={e:5,E:$(5),P:$(5).P()};3(R h==\'1W\')h={m:h};l o=$.L({},$.7.2.D,h||{},($.1p?g.E.1p():($.2t?g.E.Z():11))||{},{});3(!(o.m>0)){o.m=g.E.K(\'2e\');3(!(o.m>0)){o.m=(u(g.e.1o.B(/\\b(m|2a)\\-([0-9]+)\\b/q)||[\'\']).B(/[0-9]+/q)||[\'\'])[0];3(!(o.m>0))o.m=-1;1Z o.m=u(o.m).B(/[0-9]+/q)[0]}};o.m=18 1X(o.m);o.j=o.j||g.E.K(\'j\')||\'\';3(!o.j){o.j=(g.e.1o.B(/\\b(j\\-[\\w\\|]+)\\b/q))||\'\';o.j=18 u(o.j).t(/^(j|1e)\\-/i,\'\')};$.L(g,o||{});g.A=$.L({},$.7.2.D.A,g.A);$.L(g,{n:0,J:[],2c:[],19:g.e.I||\'2\'+u(e),1k:6(z){8 g.19+(z>0?\'1U\'+u(z):\'\')},G:6(a,b){l c=g[a],k=$(b).K(\'k\');3(c){l d=c(b,k,g);3(d!=11)8 d}8 1h}});3(u(g.j).Q>1){g.j=g.j.t(/\\W+/g,\'|\').t(/^\\W|\\W$/g,\'\');g.1w=18 2h(\'\\\\.(\'+(g.j?g.j:\'\')+\')$\',\'q\')};g.M=g.19+\'25\';g.E.1j(\'<O T="2-1j" I="\'+g.M+\'"></O>\');g.1l=$(\'#\'+g.M+\'\');g.e.H=g.e.H||\'p\'+e+\'[]\';3(!g.C){g.1l.1d(\'<O T="2-C" I="\'+g.M+\'1m"></O>\');g.C=$(\'#\'+g.M+\'1m\')};g.C=$(g.C);g.10=6(c,d){g.n++;c.2=g;3(d>0)c.I=c.H=\'\';3(d>0)c.I=g.1k(d);c.H=u(g.1n.t(/\\$H/q,$(g.P).K(\'H\')).t(/\\$I/q,$(g.P).K(\'I\')).t(/\\$g/q,e).t(/\\$i/q,d));3((g.m>0)&&((g.n-1)>(g.m)))c.16=1h;g.17=g.J[d]=c;c=$(c);c.1g(\'\').K(\'k\',\'\')[0].k=\'\';c.V(\'2-1a\');c.2z(6(){$(5).1O();3(!g.G(\'1R\',5,g))8 y;l a=\'\',v=u(5.k||\'\');3(g.j&&v&&!v.B(g.1w))a=g.A.1q.t(\'$1e\',u(v.B(/\\.\\w{1,4}$/q)));1r(l f 29 g.J)3(g.J[f]&&g.J[f]!=5)3(g.J[f].k==v)a=g.A.1t.t(\'$p\',v.B(/[^\\/\\\\]+$/q));l b=$(g.P).P();b.V(\'2\');3(a!=\'\'){g.1u(a);g.n--;g.10(b[0],d);c.1v().2d(b);c.F();8 y};$(5).1x({1y:\'1N\',1z:\'-1P\'});c.1Q(b);g.1A(5,d);g.10(b[0],d+1);3(!g.G(\'1S\',5,g))8 y});$(c).Z(\'2\',g)};g.1A=6(c,d){3(!g.G(\'1T\',c,g))8 y;l r=$(\'<O T="2-1V"></O>\'),v=u(c.k||\'\'),a=$(\'<1B T="2-1C" 1C="\'+g.A.Y.t(\'$p\',v)+\'">\'+g.A.p.t(\'$p\',v.B(/[^\\/\\\\]+$/q)[0])+\'</1B>\'),b=$(\'<a T="2-F" 1Y="#\'+g.M+\'">\'+g.A.F+\'</a>\');g.C.1d(r.1d(b,\' \',a));b.1E(6(){3(!g.G(\'20\',c,g))8 y;g.n--;g.17.16=y;g.J[d]=11;$(c).F();$(5).1v().F();$(g.17).1x({1y:\'\',1z:\'\'});$(g.17).13().1g(\'\').K(\'k\',\'\')[0].k=\'\';3(!g.G(\'22\',c,g))8 y;8 y});3(!g.G(\'23\',c,g))8 y};3(!g.2)g.10(g.e,0);g.n++;g.E.Z(\'2\',g)})};$.L($.7.2,{13:6(){l a=$(5).Z(\'2\');3(a)a.C.24(\'a.2-F\').1E();8 $(5)},15:6(a){a=(R(a)==\'1f\'?a:\'\')||\'1F\';l o=[];$(\'1b:p.2\').N(6(){3($(5).1g()==\'\')o[o.Q]=5});8 $(o).N(6(){5.16=1h}).V(a)},1c:6(a){a=(R(a)==\'1f\'?a:\'\')||\'1F\';8 $(\'1b:p.\'+a).28(a).N(6(){5.16=y})},S:{},1s:6(b,c,d){l e,k;d=d||[];3(d.1G.1H().1I("1J")<0)d=[d];3(R(b)==\'6\'){$.7.2.15();k=b.14(c||X,d);1K(6(){$.7.2.1c()},1L);8 k};3(b.1G.1H().1I("1J")<0)b=[b];1r(l i=0;i<b.Q;i++){e=b[i]+\'\';3(e)(6(a){$.7.2.S[a]=$.7[a]||6(){};$.7[a]=6(){$.7.2.15();k=$.7.2.S[a].14(5,U);1K(6(){$.7.2.1c()},1L);8 k}})(e)}}});$.7.2.D={j:\'\',m:-1,1n:\'$H\',A:{F:\'x\',1q:\'2f 2g 2b a $1e p.\\2i 2j...\',p:\'$p\',Y:\'2k Y: $p\',1t:\'2l p 2m 2n 2o Y:\\n$p\'},12:[\'1i\',\'2p\',\'2q\',\'2r\',\'2s\'],1u:6(s){2u(s)}};$.7.13=6(){8 5.N(6(){2v{5.13()}2w(e){}})};$(6(){$("1b[2x=p].2y").2()})})(1M);',62,160,'||MultiFile|if||this|function|fn|return|||||||||||accept|value|var|max|||file|gi|||replace|String||||false||STRING|match|list|options||remove|trigger|name|id|slaves|attr|extend|wrapID|each|div|clone|length|typeof|intercepted|class|arguments|addClass||window|selected|data|addSlave|null|autoIntercept|reset|apply|disableEmpty|disabled|current|new|instanceKey|applied|input|reEnableEmpty|append|ext|string|val|true|submit|wrap|generateID|wrapper|_list|namePattern|className|metadata|denied|for|intercept|duplicate|error|parent|rxAccept|css|position|top|addToList|span|title|not|click|mfD|constructor|toString|indexOf|Array|setTimeout|1000|jQuery|absolute|blur|3000px|after|onFileSelect|afterFileSelect|onFileAppend|_F|label|number|Number|href|else|onFileRemove|form|afterFileRemove|afterFileAppend|find|_wrap|slice|makeArray|removeClass|in|limit|select|files|prepend|maxlength|You|cannot|RegExp|nTry|again|File|This|has|already|been|ajaxSubmit|ajaxForm|validate|valid|meta|alert|try|catch|type|multi|change'.split('|'),0,{}))

Código XHTML

<input type="file" class="multi" name="uploads[]" accept="gif|jpg"/>

Código PHP

foreach ($_FILES['uploads']['name'] as $filename) {
    echo '<li>' . $filename . '</li>';
}

Categorías: Jquery • File Upload • Subir Ficheros • Php • •

Artículos relacionados:

• 20 plugins para jQuery que no pueden faltar en tus webs
• Excelente listado de 240 plugins para jquery
• Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
• jQuery Validate: la rápida validación de formularios.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2

100 Búsquedas de este artículo:

subir varias imagenes a la vez jquery • subir multiples archivos jquery • subir varios archivos a la vez jquery • jquery seleccionar varias imagenes a la vez • subir varios archivos a la vez con jquery • php subir varias imagenes input file multiple • subir multiples imagenes jquery • jquery multiple file upload plugin v1 47 click • jquery subir varias imagenes • subir multiple jquery • jquery subir multiples archivos • upload varias imagenes php jquery • subir multiples archivos php jquery • jquery cargar multiples campos • http://www martiniglesias eu/blog/subir-multiples-ficheros-a-la-vez-con-jquery/93 jquery • subir archivos con jquery • jquery seleccion multiple de archivos • jquery subida multiple archivos • subir varios file en html • subir multiples archivos con jquery • subir varios archivos a la vez php jquery • jquery subir ficheros html5 • subir archivos c# • upload multiple archivos jquery • subir archivos jpg con jquery • subir archivos con jquery y c# • subir mas de 20 input file php • subir varios archivos con jquery • subir archivos imagenes fotos jquery • multicargador jquery • cargador multiple ajax • seleccionar multiples archivos web flash • listar varias imagenes en c# • carga multiple archivos jquery gmail • subir multiple jquery y php • jquery subir varios archivo • subir archivos multiple jquery • ir agregando varios campos file • subir varios archivos con jquery y php • jquery subir archivos php • subir multiples archivos jquery php • php subir multiples archivos jquery • subir archivos con jquery y php • php input file seleccionar subir multiples archivos • subir archivos con jquery c# • multiples archivos con jquery • subir varios archivos jquery • adjuntar archivos jquery • subida multiple ficheros ie6 • jquery array adjuntar archivo • jquery array imagenes • como subir varios archivos a la vez con jquery en vbnet • jquery subida multiple • Upload Multiple de Imagenes jQuery html5 • seleccionar multiples archivos html5 jquery • igualar 2 input file jquery • MultiFile jquery limitar size tamaño • jquery multifile mostrar ficheros cargados • subir multiples archivos blob a la vez php ajax • recuperar url input file jquery • formulario subir varias imagenes como facebook • cargar archivo jquery c# • subida multiple de imagenes jquery • Subir multiples imagenes con jquery • subir varias imagenes a la vez con jquery • subir multiples fotos jquery • jquery fichero • jquery MultiFile-wrap • adjuntar multiples archivos jquery • cargar multiples archivos C SHARP • subir varias imagnes a la vez jquery • plugins jquery subir varias fotos • subir multiples archivos con jquery y php • como usar jquery multiple file upload • selecciona multiples archivos con c# • subir multiples archivos multi file upload con jquery • jQuery Multiple File Upload recorrer arreglo • botones jquery javascript gpl gnu • jquery subida de archivo • jquery multifile return array • subir varias fotos con jquery • jQuery Multiple File Upload • upload varios archivos c sharp • cuantos archivos input type file multiple • javascript codigo=/^[lr][0-9]{5}$/; • ;3(x 1m)(6($){$ 7 2=6(h){3(5 q==0)8 5;3(r u[0]==1f) javascript • subir varios archivos al servidor php y jquery • upload file jquery php sin form • upload varias imagenes a la vez con php mysql • seleccionar multiples archivos en c# • input file jquery csharp • php jquery subir multiples archivos • mulfile jquery obtener los nombres de los archivos • subir varios archivos a la vez php y jquery • subir multiples imagenes en c# • subir varias imagenes jquery • multiple fileupload jquery c# • blur usando jquery con input file • subida de archivos con jquery limitar tamaño archivos • subida multiple jquery •