多個文件選擇和上傳

我使用對文件上傳這段代碼的服務器（在HTML）：多個文件選擇和上傳

<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>

它是開放的文件瀏覽器，讓我選擇一個文件，當我按下提交文件發送到我的服務器。

我不知道是否有辦法做出多個文件選擇。

來源

2011-12-29 MTA

另請參閱[在php文件上傳中選擇多個文件]（http：// stackoverflow。com/questions/2071505/select-multiple-files-in-file-upload-in-php） – rds 2012-01-12 10:12:06

有很多像http://www.uploadify.com/這樣的jQuery插件可以讓你完成多個文件上傳。 – 2011-12-29 15:18:39

可以使用multiple屬性爲，像這樣：

<input type="file" multiple />

要選擇多個文件，你需要按Ctrl鍵並單擊要添加的文件。

來源

2011-12-29 15:19:25

它不工作在IE – Exception 2012-09-28 06:09:49

我剛剛嘗試過，它在IE11中工作。據微軟稱，爲單個HTML INPUT TYPE = FILE字段選擇多個文件的能力是HTML5的新功能，並且不受IE9或更早版本的支持。 – derloopkat 2015-05-21 13:37:41

它將允許您一次選擇多個文件，但這並不意味着它將允許您上傳多個文件。你必須允許它在你的js（如果你有任何進度條，ajax上傳或上傳狀態目的）和服務器端代碼，如php，ASP。 – 2015-06-25 10:21:05

最簡單的方法就是直接佈局領域，如：如何處理在服務器端的文件

<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>

讀this。

但是，如果你想要更好看的東西，你應該看看uploadify。

**關於@dotwebs回答，多重屬性是not supported by some browsers。

來源

2011-12-29 15:28:52 Magnus

您的第一個鏈接已損壞。 – freemanoid 2013-06-19 13:20:54

謝謝。我不記得我在想什麼，但現在我插入了官方PHP手冊的鏈接。 – Magnus 2013-08-05 16:49:28

多文件選擇上傳&使用Spring框架

在這篇文章中我描述了多文件上傳服務器端和客戶端的代碼。

下面的代碼是在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：

腳本多文件上傳：

<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>

HTML表單設計：

<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>

UploadController.java代碼：如果使用多個文件上傳

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

來源

2012-09-28 05:00:24

您可以添加多個屬性，像這樣在表格提交

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

它創建一個文件數組，並且可以很容易地從該數組中獲取文件名。

來源

2014-03-17 10:49:42 JudasPriest

請記住在名稱中插入括號name =「file []」 – 2017-08-25 17:44:28

：

@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); 
     } 
    } 
}

來源

2014-04-26 12:55:10 Sach

括號表示法的使用取決於您在服務器端運行的內容，而不是標準的。事實上，以相同名稱發送重複表單域的標準方式是僅在沒有括號的情況下發送它們。 PHP，Rails和其他人決定做非標準的事情。 – Brad 2016-05-29 20:40:04

多個文件選擇和上傳

回答

相關問題