springMVC结合AjaxForm上传文件


Posted in Javascript onJuly 12, 2016

最近在项目中需要上传文件文件,之前一直都是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上传操作汇总》进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
关于js类的定义
Jun 28 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
require简单实现单页应用程序(SPA)
Jul 12 #Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 #Javascript
javascript中Date对象应用之简易日历实现
Jul 12 #Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 #Javascript
浅谈angularJS中的事件
Jul 12 #Javascript
深入剖析JavaScript面向对象编程
Jul 12 #Javascript
JS及PHP代码编写八大排序算法
Jul 12 #Javascript
You might like
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
PHP脚本的10个技巧(8)
2006/10/09 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
js实现圆盘记速表
2015/08/03 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
python中subprocess批量执行linux命令
2018/04/27 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
浅谈Python爬虫基本套路
2019/03/25 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
公务员培训自我鉴定
2013/09/19 职场文书
公务员转正考察材料
2014/02/07 职场文书