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)//服務器響應失敗處理函數
{
}
});
}