springMVC结合AjaxForm上传文件

Kitty ·

更新时间:2024-11-15

· 723 次阅读

最近在项目中需要上传文件文件，之前一直都是form提交的，尝试了一下AjaxForm，感觉还比较好用，写篇随笔mark下，供以后使用。
准备工作：
下载jquery-form.js

相关jar:

commons-fileupload-1.1.1.jar

commons-io-1.3.2.jar

在spring-servlet.xml进行multipartResolver配置:


<bean id="multipartResolver"
 class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
 <property name="defaultEncoding" value="utf-8" />
 <property name="maxUploadSize" value="10485760000" />
 <property name="maxInMemorySize" value="40960" />
</bean>

这个是必须的，否则不好用。
页面：


 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false" %>
<html>
<!-- 
- Author(s): xieshuang
- Date: 2016-06-20 13:46:20
- Description:
-->
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="<%=request.getContextPath()%>/common/nui/nui.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/common/nui/jquery/jquery-form.js" type="text/javascript"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/page4nui/master/projecttype/js/projecttype_import.js"></script>
<script type="text/javascript">
 var contextPath="<%=request.getContextPath()%>";
</script>
</head>
<body>
<div id="test" class="nui-fit" style="padding-top:5px;min-width:300px;min-height:180px;">
 <form id="fileUpload" method="post" enctype="multipart/form-data">
 <div id="dataImport" style="width:100%;overflow:hidden;">
  <table style="width:100%;table-layout:fixed;" class="nui-form-table" >
   <tr>
    <th align="right" style="width:25%" >选择文件：</th>
    <td>
     <input id="uploadFile" type="file" name="file" style="width:90%;"><font style="color:red;width:5%;"> *</font>
    </td>
   </tr>
  </table>  
 </div>
 <div style="width:100%;padding-top:10px;" align="center">
  <input style="width:60px;" iconCls="icon-ok" value="确定" type="submit" />
  <span style="display:inline-block;width:25px;"></span>
  <a class="nui-button" iconCls="icon-cancel" style="width:60px;" onclick="cancel">取消</a>
 </div> 
 </form>   
</div>
</body>
</html>

核心js:


 var msg;
$(function(){
nui.parse();
//ajax配置
var options = { 
  url: contextPath+"/webapp/cfProjectType/importExcel",
  beforeSubmit: showRequest, //提交前处理 
  success:  showResponse, //处理完成 
  resetForm: true, 
  dataType: 'json' 
  }; 
 $('#fileUpload').submit(function() { //注意
  $(this).ajaxSubmit(options); 
  return false;//防止dialog 自动关闭
  });
})
//执行成功回调函数
function showResponse(e) {
 nui.hideMessageBox(msg);
 if (e.importFlag == true) {
  CloseWindow("ok");
 } else {
  //对错误的一些处理
 }
}
//提交前的一些校验
function showRequest(formData, jqForm, options){
 if(formData[0].value=="" || formData[0].value==null){
  nui.alert("请选择文件");
  return false;
 }
 var fileName = $("#uploadFile").val().split("\\").pop();
 var strs = new Array(); //定义一数组
 strs = fileName.split('.');
 var suffix = strs [strs .length - 1];
 if (suffix != 'xls' && suffix != 'xlsx') {
  nui.alert("请选择excel文件！");
  return false;
 }
 msg = nui.loading("Loading", "Please waiting");
}

java代码：


 @SuppressWarnings("unchecked")
@RequestMapping("/webapp/cfProjectType/importExcel")
@ResponseBody
public Map<String, Object> importExcel(@RequestParam("file") MultipartFile[] files, HttpServletRequest request)
  throws Throwable {
 //long starttiem = System.currentTimeMillis();
 InputStream fis;
 fis = null;
 File fileIn = null;
 try {
  for (MultipartFile myfile : files) {
   if (!myfile.isEmpty()) {
    String realPath = request.getSession().getServletContext().getRealPath("/export");
    fileIn = new File(realPath);
    //判断上传文件的保存目录是否存在
    if (!fileIn.exists() && !fileIn.isDirectory()) {
     //创建目录
     fileIn.mkdirs(路径);
    }
    //将上传的文件复制到文件夹下
    myfile.transferTo(new File(路径+文件名));
   }
   }
  }

这里我之前用过另外一个方法FileUtils.copyInputStreamToFile(InputStream arg0, File arg1)同样能将文件保存到路径下面

更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

ajaxform

1024 个赞