2011-12-29 15 views
14

estoy utilizando este código para subir archivos a un servidor (en HTML):múltiples archivos de seleccionar y cargar

<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 
    <label>upload file<input type="file" name="file" id="file" /></label> 
    <label><input type="submit" name="button" id="button" value="Submit" /></label></form> 

Es explorador de archivos abierto y permite seleccionar otro archivo, y cuando pulso en enviar el archivo es enviado a mi servidor

me pregunto si hay una manera de hacer una selección múltiple de archivos.

+1

Ver también [seleccionar varios archivos en la carga de archivos en php] (http: // stackoverflow.com/questions/2071505/select-multiple-files-in-file-upload-in-php) – rds

+0

Hay muchos complementos de jQuery como http://www.uploadify.com/ que le permiten realizar múltiples cargas de archivos. –

Respuesta

37

Usted puede utilizar el atributo multiple para que, de esta manera:

<input type="file" multiple /> 

Para seleccionar varios archivos hay que pulsar la tecla Ctrl y haga clic en los archivos que desea añadir.

+4

No funciona en IE – Exception

+0

Lo he intentado y funcionó en IE11. Según Microsoft, la capacidad de seleccionar múltiples archivos para un solo campo HTML INPUT TYPE = FILE es nueva en HTML5, y no es compatible con IE9 o versiones anteriores. – derloopkat

+0

Le permitirá seleccionar varios archivos a la vez, pero eso no significa que le permita cargar varios archivos. Debe permitirlo en su js (si tiene alguna para la barra de progreso, para subir o subir el propósito del estado de carga) y el código del lado del servidor como php, ASP. –

2

La forma más sencilla es a la disposición de los campos directamente como aquí:

<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 
<label>upload file<input type="file" name="file[]" id="file1" /></label> 
<label>upload file<input type="file" name="file[]" id="file2" /></label> 
<label>upload file<input type="file" name="file[]" id="file3" /></label> 
<label><input type="submit" name="button" id="button" value="Submit" /></label></form> 

Leer this sobre cómo manejar los archivos en el servidor.

Sin embargo, si quiere algo mejor, debería echar un vistazo al uploadify.

** Con respecto a la respuesta de @dotwebs, el atributo múltiple es not supported by some browsers.

+0

Su primer enlace está roto. – freemanoid

+0

Gracias. No recuerdo en qué enlace estaba pensando, pero ahora inserté un enlace al manual oficial de PHP. – Magnus

10

del archivo de selección múltiple & Subir Uso de primavera Marco

En este post describo lado del servidor y el código del lado del cliente para la carga de archivos múltiples.

siguiente código es para mencionar los datos de varias partes en appContext.xml

appContext.xml

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> 
    <!-- one of the properties available; the maximum file size in bytes --> 
    <property name="maxUploadSize" value="20971520"/> 
</bean> 

Simpleupload.jsp:

guión de carga de archivos múltiples:

<script type="text/javascript"> 
    var totalsizeOfUploadFiles = 0; 
    function getFileSizeandName(input) 
    { 
     var select = $('#uploadTable'); 
     for(var i =0; i<input.files.length; i++) 
     {   
      var filesizeInBytes = input.files[i].size; 
      var filesizeInMB = (filesizeInBytes/(1024*1024)).toFixed(2); 
      var filename = input.files[i].name; 
      //alert("File name is : "+filename+" || size : "+filesizeInMB+" MB || size : "+filesizeInBytes+" Bytes"); 
      if(i<=4) 
      {    
       $('#filetd'+i+'').text(filename); 
       $('#filesizetd'+i+'').text(filesizeInMB); 
      } 
      else if(i>4) 
       select.append($('<tr id=tr'+i+'><td id=filetd'+i+'>'+filename+'</td><td id=filesizetd'+i+'>'+filesizeInMB+'</td></tr>')); 
      totalsizeOfUploadFiles += parseFloat(filesizeInMB); 
      $('#totalsize').text(totalsizeOfUploadFiles.toFixed(2)+" MB"); 
      if(i==0) 
       $('#filecount').text("1file"); 
      else 
      { 
       var no = parseInt(i) + 1; 
       $('#filecount').text(no+"files"); 
      }      
     }   
    } 

    function CloseAndRefresh() 
    { 
     opener.location.reload(true); 
     self.close(); 
    }  
</script> 
forma

html diseño:

<body> 
<form method="post" id="uploadForm" action="upload" enctype="multipart/form-data"> 
    <table class="span10"> 
     <tr> 
      <td colspan="3"> 
       <legend>Simple Upload</legend> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="file" name="files[]" multiple="multiple" onchange="getFileSizeandName(this);"/> 
      </td> 
     </tr> 
     <tr>  
      <td colspan="3"> 
       <div id="uploaddiv"> 
        <table id="uploadTable" class="table table-striped table-bordered"> 
         <tr> 
          <th>Title</th> 
          <th>Size</th> 
         </tr> 
         <tbody id="tbodyid"> 
          <tr id="tr0"> 
           <td id="filetd0" height="10px" width="50px"></td> 
           <td id="filesizetd0" height="10px" width="5px"></td> 
          </tr> 
          <tr id="tr1"> 
           <td id="filetd1"></td> 
           <td id="filesizetd1"></td> 
          </tr> 
          <tr id="tr2"> 
           <td id="filetd2"></td> 
           <td id="filesizetd2"></td> 
          </tr> 
          <tr id="tr3"> 
           <td id="filetd3"></td> 
           <td id="filesizetd3"></td> 
          </tr> 
          <tr id="tr4"> 
           <td id="filetd4"></td> 
           <td id="filesizetd4"></td> 
          </tr>           
         </tbody> 
         <tfoot> 
          <tr> 
           <td id="filecount"></td><td id="totalsize"></td> 
          </tr> 
         </tfoot> 
        </table> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="3"> 
       <button class="btn btn-primary" type="submit" id="startButton" onClick="CloseAndRefresh();">Start</button> 
       <button class="btn" id="cancelButton">Cancel</button> 
      </td> 
     </tr> 
    </table> 
</form> 

código UploadController.java:

@RequestMapping(value = "/upload", method = RequestMethod.POST) 
public void UploadReceipts(@RequestParam("files[]") List<MultipartFile> file) throws Exception { 
    logger.info(" Inside the upload receipts method "+file.size()); 
    for(int i=0; i< file.size(); i++) 
    { 
     if(!file.get(i).isEmpty()) 
     { 
      CommonsMultipartFile cm = (CommonsMultipartFile) file.get(i); 
      logger.info(" Inside the file upload method "+cm.getOriginalFilename()); 
      simpleUploadService.uploadFileandSaveReceipt(cm); 
     } 
    } 
} 
1

Puede añadir un atributo múltiple de esta manera:

<input type="file" multiple="true" /> 
+0

Recuerde insertar los corchetes en el nombre name = "file []" –

3

si se utiliza la carga de archivos múltiples en el formulario enviar

<input type="file" name="file[]" multiple> 

crea una matriz de archivos y puede obtener nombres de archivos fácilmente de esa matriz.

+0

El uso de la notación de corchetes depende de lo que tenga en ejecución en el servidor, y no es estándar. De hecho, la forma estándar de enviar en campos de formulario duplicados con el mismo nombre es simplemente enviarlos sin corchetes. PHP, Rails y otros decidieron hacer cosas no estándar. – Brad

Cuestiones relacionadas