spring mvc jquery 上传

最新推荐文章于 2025-01-14 10:54:38 发布

chen88358323

最新推荐文章于 2025-01-14 10:54:38 发布

阅读量1.2k

点赞数

JAVA 同时被 2 个专栏收录

51 篇文章

订阅专栏

WEB

13 篇文章

订阅专栏

本文详细介绍了在使用Spring MVC框架时遇到的上传文件问题及其解决方案，包括配置依赖包、调整上传限制、处理异常及多文件上传的前端JS代码优化等。同时提供了解决在使用Spring MVC时后台接收不到前端的File时的NoClassDefFoundError问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/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