jquery.form.js框架实现文件上传功能案例解析(springmvc)


Posted in Javascript onMay 26, 2016

上一篇 Bootstrap自定义文件上传下载样式(https://3water.com/article/85156.htm)已经有一段时间了,一直在考虑怎么样给大家提交一篇完美的逻辑处理功能。现在我结合自己的实际工作给大家分享一下。
使用的技术有jquery.form.js框架, 以及springmvc框架。主要实现异步文件上传的同时封装对象,以及一些注意事项。
功能本身是很简单的,但是涉及到一些传递参数类型的问题。例如:jquery的ajax方法与jquery.form.js中的ajaxSubmit方法的参数,具体细节将在下一篇博客中分享。
重点: html表格三要素: action="fileUpload/fileUpload" method="post" enctype="multipart/form-data";
1. 最简单的表单直接提交
html代码:

<body>
 <form action="fileUpload/fileUpload" method="post" enctype="multipart/form-data">
 <input type="text" name="password">
 <input type="file" name="file">
 <input type="text" name="username">
 <input type="submit" value="submit">
 </form>
 <button id="button">提交</button>
</body>

java代码

@Controller
@RequestMapping("/fileUpload")
public class FileUpload {

 @RequestMapping("/fileUpload")
 @ResponseBody
 public String FileUpload1(@RequestParam("file")MultipartFile file/*, @RequestParam("username")String username*/){
 System.out.println("------------------------------- "+ file.getSize());
 if(!file.isEmpty()){
 System.out.println("Process file: "+file.getOriginalFilename() );
 try {
 FileUtils.copyInputStreamToFile(file.getInputStream(), new File("c:\\temp\\imooc\\", System.currentTimeMillis()+ file.getOriginalFilename()));
 } catch (IOException e) {
 
 e.printStackTrace();
 }
 }
 return "NewFile";
 }
}

具体的springmvc配置,包括文件上传的配置如下
准备工作:
需要把Jakarta Commons FileUpload及Jakarta Commons io的包放lib里。
这边的包是:
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="maxUploadSize"><value>100000</value></property> 
 <property name="defaultEncoding"><value>UTF-8</value></property> 
</bean>

接下来就是页面了:
注意Form的写法和文件上传组件的写法。

<form action="uploadPosdetailFile.html" method="post" ENCTYPE="multipart/form-data">
 <div class="form" >
 <p>
 <span class="req"><input id="startDateTxt" name="startDateTxt" class="field size4" title="Enter the date" /></span>
 <label>Start Date: <span>(Date format:MM/dd/yyyy,eg:01/01/2014)</span></label>
 </p>
 
 <p>
 <span class="req"><input id="endDateTxt" name="endDateTxt" class="field size4" title="Enter the date" /></span>
 <label>End Date: <span>(Date format:MM/dd/yyyy,eg:12/25/2014)</span></label>
 </p>
 
 <p>
 <span class="req"><input type="file" name="uploadFileCtrl" class="field size4" title="Choose the file" /></span>
 <label>Upload file: <span>(click browse to choose)</span></label>
 </p>
 </div>
 
 <div class="buttons">
 <input id="queryBtn" type="Submit" class="button" value="Submit" />
 </div>
 
 </form>

再在控制器里写处理代码,注意参数和页面控件的对应关系:

@RequestMapping(value="/uploadPosdetailFile")
 public String uploadPosdetailFile(@RequestParam("startDateTxt") String startDateTxt, 
   @RequestParam("endDateTxt") String endDateTxt,
   @RequestParam("uploadFileCtrl") MultipartFile file,HttpServletRequest request,HttpServletResponse response){
 try {
 System.out.println("@@@@@@@@@1.startDateTxt="+startDateTxt);
 System.out.println("@@@@@@@@@2.endDateTxt="+endDateTxt);
 System.out.println("@@@@@@@@@3.file="+file.getOriginalFilename());// 得到上传文件的文件名
 
 if(file.isEmpty()==false){
 InputStream is=file.getInputStream();
 InputStreamReader isr = new InputStreamReader(is);

  BufferedReader br=new BufferedReader(isr); 

  String s;
  while((s=br.readLine())!=null ){
  System.out.println(s);
  }

 br.close();
 isr.close();
 is.close();
 }
 
 
 return "/pages/posdetail/uploadposdetailresult/index.jsp";
 } catch (Exception e) {
 e.printStackTrace();
 logger.error(e);
 
 request.setAttribute("error", e.getClass());
 request.setAttribute("reason", e.getMessage());
 StackTraceElement[] arr=e.getStackTrace();
 request.setAttribute("stackTraceElements", arr);
 
 return "pages/error/index.jsp";
 }
 }

2. 使用jquery.form.js的ajaxSubmit方法
html代码以及java代码保持不变,给id=button的按钮添加事件

$("#button").click(function(){
 var hideForm = $('form'); 
 var options = { 
 dataType : "json", 
 /*data: {'file': $("input[type=file]").val(), "username": '123', password: "123"},*/
 beforeSubmit : function() { 
 alert("正在上传"); 
 }, 
 success : function(result) { 
 alert('成功上传!'); 
 
 }, 
 error : function(result) { 
  
 } 
 }; 
 hideForm.ajaxSubmit(options); 
 });

3. 在后台使用一个User对象接收username和password。

<form action="fileUpload/fileUpload" method="post" enctype="multipart/form-data">
 <input type="file" name="file">
 <input type="submit" value="submit">
</form>

有可能你会按照下面的步骤做: 封装表单数据作为一个json对象, 给上面的js代码添加data 
data:{'file': $("input[type=file]").val(), 'user':{"username": '123', password: "123"}}
在此处其实是画蛇添足,这种情况下发送的请求的详细情况如图:

  jquery.form.js框架实现文件上传功能案例解析(springmvc)

此时页面会报错415
----------------------------------------------------------------
最合理的代码应该是:html代码与1相同, js代码与2相同, java代码
public String FileUpload1(@RequestParam("file")MultipartFile file, User user){
而且User、前面不能加@RequestBody。

更多精彩内容,请点击《jQuery上传操作汇总》, 《spring上传下载专题》进行深入学习和研究。

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

Javascript 相关文章推荐
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
vuejs指令详解
Feb 07 Javascript
js闭包学习心得总结
Apr 17 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
小程序实现筛子抽奖
May 26 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 #Javascript
Bootstrap自定义文件上传下载样式
May 26 #Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 #Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 #Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 #Javascript
怎么引入(调用)一个JS文件
May 26 #Javascript
JS加载器如何动态加载外部js文件
May 26 #Javascript
You might like
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
php 操作调试的方法
2012/07/12 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
解析isset与is_null的区别
2013/08/09 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
python 统计代码行数简单实例
2017/05/04 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
详细分析Python collections工具库
2020/07/16 Python
python类共享变量操作
2020/09/03 Python
学生干部学习的自我评价
2014/02/18 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python