spring-servlet.xml
<!-- spring mvc实现上传需添加该操作类 依赖包commons-fileupload-1.2.2.jar commons-io-2.0.1.jar -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 指定所上传文件的总大小不能超过5000KB。注意maxUploadSize属性的限制不是针对单个文件,而是所有文件的容量之和 -->
<property name="maxUploadSize" value="52428800"/>
<property name="maxInMemorySize">
<value>2048</value>
</property>
</bean>
<!-- SpringMVC在超出上传文件限制时,会抛出org.springframework.web.multipart.MaxUploadSizeExceededException -->
<!-- 该异常是SpringMVC在检查上传的文件信息时抛出来的,而且此时还没有进入到Controller方法中 -->
<bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
<property name="exceptionMappings">
<props>
<!-- 遇到MaxUploadSizeExceededException异常时,自动跳转到/WEB-INF/jsp/error_fileupload.jsp页面 -->
<prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">error</prop>
</props>
</property>
</bean>
controller:
/**
* 上传工作票
* @param multipartRequest
* @param response
* @throws Exception
*/
@RequestMapping(value = "/upload.do", method = RequestMethod.POST)
public void uploadOrder(MultipartHttpServletRequest multipartRequest,
HttpServletResponse response) throws Exception {
response.setContentType("text/html;charset=UTF-8");
String result = "";
try {
for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) {
String key = (String) it.next();
MultipartFile orderFile = multipartRequest.getFile(key);
if (orderFile.getOriginalFilename().length() > 0) {
String realPath = multipartRequest.getSession()
.getServletContext()
.getRealPath("/WEB-INF/uploadOrder");
FileUtils
.copyInputStreamToFile(
orderFile.getInputStream(),
new File(realPath, orderFile
.getOriginalFilename()));
}
}
result="{result:'上传成功'}";
} catch (Exception ex) {
result="{result:'上传失败'}";
ex.printStackTrace();
}
response.getWriter().print(result);
}
js:jquery ajaxfileupload.js
需修改源ajaxfileupload.js文件,支持多文件上传
源文件: http://files.cnblogs.com/xzb-cnblogs/ajaxfileupload.js
修改后内容:
createUploadForm: function(id, fileElementId, data)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
if (data) {
for ( var i in data) {
jQuery(
'<input type="hidden" name="' + i + '" value="'
+ data[i] + '" />').appendTo(form);
}
}
for (var i = 0; i < fileElementId.length; i ++) {
var oldElement = jQuery('#' + fileElementId[i]);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileElementId[i]);
jQuery(oldElement).attr('name', fileElementId[i]);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
}
//set attributes
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');
return form;
}
jsp:
<div id="orderUploadWin" modal="true" class="easyui-window"
closed="true" title="上传" style="width: 470px; height: 200px;">
<div style="padding: 5px; width: 98%" class="datagrid-toolbar">
<a href="javascript:uploadOrder()" class="easyui-linkbutton"
plain="true" iconCls="icon-save">保存</a>
</div>
<div>
<form id="orderUploadForm" name="orderUploadForm"
style="padding: 10px 20px 10px 40px;" enctype="multipart/form-data"
method="post">
<table class="myResume">
<tr>
<td class="panel-header">选择风险预控卡:</td>
<td><input class="easyui-validatebox" required="true"
id="files1" name="files1" type="file" style="width: 280px"></td>
</tr>
<tr>
<td class="panel-header">选择倒闸工作票:</td>
<td><input class="easyui-validatebox" required="true"
id="files2" name="files2" type="file" style="width: 280px"></td>
</tr>
</table>
</form>
</div>
</div>
function uploadOrder() {
//var r = $("#orderUploadForm").form('validate');
//if(!r) {
// return ;
//}
var uplist = $("input[name^=files]");
var arrId = [];
for ( var i = 0; i < uplist.length; i++) {
if (uplist[i].value) {
arrId[i] = uplist[i].id;
}
}
$.ajaxFileUpload({
url : "orderTplManager/upload.do",//用于文件上传的服务器端请求地址
secureuri : false,//一般设置为false
fileElementId : arrId,//文件上传空间的id属性 <input type="file" id="files1" name="files1" /><input type="file" id="files2" name="files2" />
dataType : 'json',//返回值类型 一般设置为json
success : function(data, status) //服务器成功响应处理函数
{
if (data) {
$.messager.alert("提示", data.result, "info");
} else {
$.messager.alert("提示", data.result, "error");
}
},
error : function(data, status, e)//服务器响应失败处理函数
{
}
});
}