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 相关文章推荐
21个值得收藏的Javascript技巧
Feb 04 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
js实现div弹出层的方法
Nov 20 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
javascript实现前端分页效果
Jun 24 Javascript
JavaScript实现多文件下载方法解析
Aug 07 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
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
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
self.attachevent is not a function的解决方法
2017/04/04 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
微信小程序常用赋值方法小结
2019/04/30 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
python中执行shell的两种方法总结
2017/01/10 Python
Python封装原理与实现方法详解
2018/08/28 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Python with标签使用方法解析
2020/01/17 Python
python文件编写好后如何实践
2020/07/07 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
Python的logging模块基本用法
2020/12/24 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
十八大演讲稿
2014/05/22 职场文书
信用卡工资证明格式
2014/09/13 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python