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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
js实现右键菜单功能
Nov 28 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 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 中的一些经验积累
2006/10/09 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
javascript replace()正则替换实现代码
2010/02/26 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
python访问抓取网页常用命令总结
2017/04/11 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
模范家庭事迹材料
2014/02/10 职场文书
工程技术员岗位职责
2014/03/02 职场文书
小学教师评语大全
2014/04/23 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Redis唯一ID生成器的实现
2022/07/07 Redis