springMVC結(jié)合AjaxForm上傳文件

更新時間：2016年07月12日 09:38:49 作者：河岸飛流

這篇文章主要為大家詳細(xì)介紹了springMVC結(jié)合AjaxForm上傳文件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近在項(xiàng)目中需要上傳文件文件，之前一直都是form提交的，嘗試了一下AjaxForm，感覺還比較好用，寫篇隨筆mark下，供以后使用。
準(zhǔn)備工作：
下載jquery-form.js

相關(guān)jar:

commons-fileupload-1.1.1.jar

commons-io-1.3.2.jar

在spring-servlet.xml進(jìn)行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 自動關(guān)閉
  });
})

//執(zhí)行成功回調(diào)函數(shù)
function showResponse(e) {
 nui.hideMessageBox(msg);
 if (e.importFlag == true) {
  CloseWindow("ok");
 } else {
  //對錯誤的一些處理
 }
}

//提交前的一些校驗(yàn)
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(); //定義一數(shù)組
 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()) {
     //創(chuàng)建目錄
     fileIn.mkdirs(路徑);
    }
    //將上傳的文件復(fù)制到文件夾下
    myfile.transferTo(new File(路徑+文件名));
   }
   }
  }

這里我之前用過另外一個方法FileUtils.copyInputStreamToFile(InputStream arg0, File arg1)同樣能將文件保存到路徑下面

更多精彩內(nèi)容請參考專題《ajax上傳技術(shù)匯總》，《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: