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 相关文章推荐
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
Highcharts入门之简介
Aug 02 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 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
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
新闻内页-JS分页
2006/06/07 Javascript
top.location.href 没有权限 解决方法
2008/08/05 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
python与C互相调用的方法详解
2017/07/14 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
python实现邮件自动发送
2019/08/10 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python如何读取、写入CSV数据
2020/07/28 Python
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
致跳远、跳高运动员广播稿
2014/01/09 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
平安家庭事迹材料
2014/12/20 职场文书
商务代表岗位职责
2015/02/15 职场文书
英文辞职信范文
2015/05/13 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang