修改ajaxfileupload.js,在SpringMVC下实现多个文件同时上传
jsp代码
<form:form id="multiUploadForm" commandName="multiFileInfo">
<table>
<tr>
<th>用户名称</th>
<td>
<form:input path="username"/>
</td>
</tr>
<tr>
<th>用户密码</th>
<td>
<form:input path="password"/>
</td>
</tr>
<tr>
<th align="left">资源文件</th>
<td>
<input type="file" id="file1" name="file" accept="application/zip"/><br/>
</td>
</tr>
<tr>
<th align="left">资源文件</th>
<td>
<input type="file" id="file2" name="file" accept="application/zip"/><br/>
</td>
</tr>
<tr>
<td>
<input type="button" value="上传" onclick="uploadFile('<%=contextPath%>')">
</td>
</tr>
</table>
</form:form>
<script type="text/javascript">
function uploadFile(contextPath) {
var fileIds = new Array();
var formHandle = document.getElementById("multiUploadForm");
var tagElements = formHandle.getElementsByTagName('input');
for (var j = 0; j < tagElements.length; j++) {
element = tagElements[j];
if ("file" == element.type) {
fileIds.push(element.id);
}
}
var requestUrl = contextPath + "/clientresources/multi";
$.ajaxFileUpload({
url : requestUrl,
secureuri : false,
//fileElementId : ['file1', 'file2'],
fileElementId : fileIds,
dataType: 'text',
data : {
username : $("#username").val(),
password : $("#password").val()
},
success: function () {
alert('上传成功');
},
error: function (data, status, e) {
alert('上传出错');
}
});
}
</script>
springMVC的model
public class MultiFileInfo {
public String username;
public String password;
public MultipartFile[] file;
setter...
getter...
}
springMVC的controller
@RequestMapping(value = "/clientresources/multi", method = RequestMethod.POST)
public String multiFile(Model model, @ModelAttribute MultiFileInfo multiFileInfo) {
for (MultipartFile file : multiFileInfo.file) {
System.out.println(file.getOriginalFilename() + ":" + file.getSize());
}
return "client_resources/multi";
}
修改ajaxfileupload.js中的createUploadForm
/*被注释掉的代码是原有代码,替换成下面的代码。
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
*/
if(typeof(fileElementId) == 'string'){
fileElementId = [fileElementId];
}
for(var i in fileElementId){
var oldElement = jQuery("input[id="+fileElementId[i]+"]");
oldElement.each(function() {
var newElement = jQuery($(this)).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
});
}
注意,上传文件的input需要设置不同的id,name属性也必须设置。