spring mvc jquery 上传

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 <span style="color:#ff0000;">void</span> 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);
}

需修改源ajaxfileupload.js文件，支持多文件上传

源文件: http://files.cnblogs.com/xzb-cnblogs/ajaxfileupload.js

压缩后的JS：

;(function($){$.fn.AjaxFileUpload=function(options){var defaults={action:"upload.php",onChange:function(filename){},onSubmit:function(filename){},onComplete:function(filename,response){}},settings=$.extend({},defaults,options),randomId=(function(){var id=0;return function(){return"_AjaxFileUpload"+id++;};})();return this.each(function(){var $this=$(this);if($this.is("input")&&$this.attr("type")==="file"){$this.bind("change",onChange);}});function onChange(e){var $element=$(e.target),id=$element.attr('id'),$clone=$element.removeAttr('id').clone().attr('id',id).AjaxFileUpload(options),filename=$element.val().replace(/.*(\/|\\)/,""),iframe=createIframe(),form=createForm(iframe);$clone.insertBefore($element);settings.onChange.call($clone[0],filename);iframe.bind("load",{element:$clone,form:form,filename:filename},onComplete);form.append($element).bind("submit",{element:$clone,iframe:iframe,filename:filename},onSubmit).submit();}
function onSubmit(e){var data=settings.onSubmit.call(e.data.element,e.data.filename);if(data===false){$(e.target).remove();e.data.iframe.remove();return false;}else{for(var variable in data){$("<input />").attr("type","hidden").attr("name",variable).val(data[variable]).appendTo(e.target);}}}
function onComplete(e){var $iframe=$(e.target),doc=($iframe[0].contentWindow||$iframe[0].contentDocument).document,response=doc.body.innerHTML;if(response){response=$.parseJSON(response);}else{response={};}
settings.onComplete.call(e.data.element,e.data.filename,response);e.data.form.remove();$iframe.remove();}
function createIframe(){var id=randomId();$("body").append('<iframe src="javascript:false;" name="'+id+'" id="'+id+'" style="display: none;"></iframe>');return $('#'+id);}
function createForm(iframe){return $("<form />").attr({method:"post",action:settings.action,enctype:"multipart/form-data",target:iframe[0].name}).hide().appendTo("body");}};})(jQuery);

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>

JS方法

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)//服务器响应失败处理函数
{

}
});
}

</pre><pre name="code" class="javascript"><pre style="font-family: Consolas; font-size: 14.4pt; background-color: rgb(255, 255, 255);"><span style="color:#808080;"><em>/**
</em></span><span style="color:#808080;"><em> * </em></span><span style="color:#808080;font-family:'宋体';"><em>检测 图片格式
</em></span><span style="color:#808080;font-family:'宋体';"><em> </em></span><span style="color:#808080;"><em>*/
</em></span><span style="color:#000080;"><strong>function </strong></span><span style="font-style:italic;">checkImageType</span>(filePath){
<span style="color:#000080;"><strong>var </strong></span><span style="color:#458383;">indexOfLastDot </span>= filePath.<span style="color:#7a7a43;">lastIndexOf</span>(<span style="color:#008000;"><strong>"."</strong></span>);
<span style="color:#000080;"><strong>var </strong></span><span style="color:#458383;">fileType </span>= filePath.<span style="color:#7a7a43;">substring</span>(<span style="color:#458383;">indexOfLastDot </span>+ <span style="color:#0000ff;">1</span>).<span style="color:#7a7a43;">toUpperCase</span>();
<span style="color:#000080;"><strong>if</strong></span>(<span style="color:#458383;">fileType</span>== <span style="color:#008000;"><strong>"JPG" </strong></span>||<span style="color:#458383;">fileType</span>== <span style="color:#008000;"><strong>"PNG"</strong></span>)
<span style="color:#000080;"><strong>return true</strong></span>;
<span style="color:#000080;"><strong>return false</strong></span>;
}
<span style="color:#808080;"><em>/**
</em></span><span style="color:#808080;"><em> * </em></span><span style="color:#808080;font-family:'宋体';"><em>检测 图片大小
</em></span><span style="color:#808080;font-family:'宋体';"><em> </em></span><span style="color:#808080;"><em>*/
</em></span><span style="color:#000080;"><strong>function </strong></span><span style="font-style:italic;">checkImageLen</span>(){
<span style="color:#000080;"><strong>var </strong></span><span style="color:#458383;">fileInput </span>= $(<span style="color:#008000;"><strong>"#tab-2-pic"</strong></span>)[<span style="color:#0000ff;">0</span>];
<span style="color:#000080;"><strong>var </strong></span><span style="color:#458383;">fileSize  </span>= <span style="color:#458383;">fileInput</span>.<span style="color:#660e7a;"><strong>files</strong></span>[<span style="color:#0000ff;">0</span>].<span style="color:#660e7a;"><strong>size</strong></span>;
<span style="color:#660e7a;"><strong>console</strong></span>.<span style="color:#7a7a43;">log</span>(<span style="color:#008000;"><strong>"</strong></span><span style="color:#008000;font-family:'宋体';"><strong>文件大小</strong></span><span style="color:#008000;"><strong>"</strong></span>+<span style="color:#458383;">fileSize</span>);
<span style="color:#000080;"><strong>if</strong></span>(<span style="color:#458383;">fileSize</span>><span style="color:#0000ff;">5</span>*<span style="color:#0000ff;">1024</span>*<span style="color:#0000ff;">1024 </span>){
<span style="color:#000080;"><strong>return false</strong></span>;
}
<span style="color:#000080;"><strong>return true</strong></span>;
}

//检测格式,js是不准确的，需要在后端通过比较文件头<a target=_blank href="http://blog.csdn.net/chen88358323/article/details/50018557">见这里</a>

所遇问题1： 在使用springMVC 框架时 , IE浏览器会将返回的数据直接下载

解决办法：在springMVC配置文件中 添加如下配置信息：

[html] view
plaincopy





<!-- 避免IE执行AJAX时,返回JSON出现下载文件 -->

<bean id="mappingJacksonHttpMessageConverter"

class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">

<property name="supportedMediaTypes">

<list>

<value>text/html;charset=UTF-8</value>

</list>

</property>

</bean>

同时设置返回数据的类型： response.setContentType("text/plain;charset=UTF-8");

所遇问题2：返回的数据中带有<pre> 标签

解决办法： 将AjaxFileUpload.js文件中 eval( "data = " + data ); 改成 data = jQuery.parseJSON(jQuery(data).text());

此时如果在页面上还是无法解析时，请再将 返回数据转成Json 一遍 data=jQuery.parseJSON(data);

所遇问题3： 在使用springMVC时 后台接收不到 前台的 File 时 报错：

nested exception is java.lang.NoClassDefFoundError:org/apache/commons/io/output/DeferredFileOutputStreamat

org.springframework.web.servlet.DispatcherServlet.triggerAfterCompletionWithError(DispatcherServlet.java:1259)

at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:945)

at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:856)

at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:915)

at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:822)

java.lang.ClassNotFoundException:
org.apache.commons.io.output.DeferredFileOutputStream

at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1358)

at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1204)

at org.apache.commons.fileupload.disk.DiskFileItemFactory.createItem(DiskFileItemFactory.java:199)

解决办法： 1、 添加 commons-io-1.3.1.jar 包 ，此包是上传所依赖的包 。

2、如果添加此包后还是提示找不到本包 原因可能有两点：①、tomcat 没有加载本包，此时请到tomcat下 将此包勾选上 。 ②如果出现本包冲突时 将tomcat下

的同名jar包 删掉

参考:http://www.cnblogs.com/xzb-cnblogs/p/3220536.html