springmvc+jquery fileupload实现异步文件上传

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

   }
  });
 }

        

 

转载于:https://www.cnblogs.com/xzb-cnblogs/p/3220536.html