Javascript 多文件选择上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8669579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple files select and upload
提问by MTA
i am using this code for upload files to a server(in html):
我正在使用此代码将文件上传到服务器（在 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>
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.
我想知道是否有一种方法可以选择多个文件。
回答by js-coder
You can use the multipleattribute for that, like this:
您可以multiple为此使用该属性，如下所示：
<input type="file" multiple />
To select multiple files you need to press the Ctrlkey and click on the files you want to add.
要选择多个文件，您需要按Ctrl键并单击要添加的文件。
回答by lk.annamalai
Multiple File Select & Upload Using Spring Framework
使用 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 中的多部分数据
appContext.xml
应用上下文.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:
简单上传.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:
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 code:
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);
}
}
}
回答by Sach
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.
它创建一个文件数组，并且可以轻松地从该数组中获取文件名。
回答by Magnus
The easiest way is to layout the fields directly, like this:
最简单的方法是直接布局字段，如下所示：
<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>
Read thison how to handle the files on server side.
阅读本文了解如何处理服务器端的文件。
However, if you want something better looking you should take a look at uploadify.
但是，如果你想要更好看的东西，你应该看看uploadify。
** Regarding @dotwebs answer, the multiple attribute is not supported by some browsers.
** 关于@dotwebs 的回答，某些浏览器不支持multiple 属性。
回答by JudasPriest
you may add a multiple attribute like this:
您可以像这样添加多个属性：
<input type="file" multiple="true" />
