i am using this code for upload files to a server(in html):
<form action="" method="post" enctype="multipart/form-data" name="form1"> <label>upload file<input type="file" name="file" /></label> <label><input type="submit" name="button" value="Submit" /></label></form> It's open file browser and let me select a file,and when i press on Submit the file is sent to my server.
i wonder if there is a way to make multiple file select.
25 Answers
You can use the multiple attribute for that, like this:
<input type="file" multiple /> To select multiple files you need to press the Ctrl key and click on the files you want to add.
Multiple File Select & Upload Using Spring Framework
In this post i describe server side and client side code for multiple file upload.
Following code is for mentioning the multipart data in appContext.xml
appContext.xml
<bean> <!-- one of the properties available; the maximum file size in bytes --> <property name="maxUploadSize" value="20971520"/> </bean> Simpleupload.jsp:
script for multiple file upload:
<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 form design:
<body> <form method="post" action="upload" enctype="multipart/form-data"> <table> <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> <table> <tr> <th>Title</th> <th>Size</th> </tr> <tbody> <tr> <td height="10px" width="50px"></td> <td height="10px" width="5px"></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </tbody> <tfoot> <tr> <td></td><td></td> </tr> </tfoot> </table> </div> </td> </tr> <tr> <td colspan="3"> <button type="submit" onClick="CloseAndRefresh();">Start</button> <button>Cancel</button> </td> </tr> </table> </form> UploadController.java code:
@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); } } } if using multiple file upload at form submit
<input type="file" name="file[]" multiple> it create an array of files and can get files name easily from that array.
1The easiest way is to layout the fields directly, like this:
<form action="" method="post" enctype="multipart/form-data" name="form1"> <label>upload file<input type="file" name="file[]" /></label> <label>upload file<input type="file" name="file[]" /></label> <label>upload file<input type="file" name="file[]" /></label> <label><input type="submit" name="button" value="Submit" /></label></form> Read this on how to handle the files on server side.
However, if you want something better looking you should take a look at uploadify.
** Regarding @dotwebs answer, the multiple attribute is not supported by some browsers.
2you may add a multiple attribute like this:
<input type="file" multiple="true" /> 
