SpringMVC+uploadify文件上传
前言
准备筹划一个自己的个人网站,初步的架构设计采用SSH(Spring-MVC,Spring,Hibernate),在这里
顺便记录一下设计和开发过程,以备参考。后续会陆续更新文档,如有任何问题,欢迎各位不吝指出,共
同学习。
环境
开发环境 版本
eclipse | 4.3.2 |
maven | 3.2.1 |
Spring-MVC | 3.2.3.RELEASE |
Spring | Spring |
Hibernate | 3.2.5 |
文件上传是很多项目都会使用到的功能,SpringMVC当然也提供了这个功能。不过本人不建议在项目中
通过form表单来提交文件上传,这样做的局限性很大。对于文件上传等类似的功能,推荐使用第三方的
插件(或者自己写的插件)来实现,这样可以减轻服务端的压力,同时呈现的页面效果也会更好,而且
可插拔,扩展性好。
在这里使用AJAX来上传文件,为了方便,使用了第三方的插件uploadify(http://www.uploadify.com/ ),
这个插件展示效果很好,还提供了丰富的功能,在下面的内容中会简单介绍,有兴趣的朋友可以到官网
去看下文档,简单易用。
这里依然借助了SpringMVC的文件上传功能,不过十三哥建议还是不要这样做,这里纯粹是为了介绍
SpringMVC的文件上传而已。
还是希望能使用完整的前后端结合的文件上传插件,把文件上传的功能独立出来。这样页面上就只显示
一个已上传的文件在服务端的保存地址,这个地址对应于数据库表中的URL字段。这样显示文件列表的
时候,服务端也只是从表中取出一系列的URL,再交由读文件的插件去读文件,这将会是非常好的一个
设计了。
使用SpringMVC的文件上传功能,需要引入相应的jar包,配置文件解析器。
【添加处理文件上传的jar包】
pom.xml添加commons-io和commons-fileupload的依赖
<!-- 文件上传 begin--> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3</version> </dependency> <!-- 文件上传 end-->
【springMVC-servlet.xml配置文件解析器】
<!-- SpringMVC上传文件时,处理文件的解析器,还可以配置文件的大小和异常处理--> <!-- 但是在后端配置文件的大小是不明智的,一般前端的上传文件插件中都提供了这个功能, 所以在前端设置会更好--> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
另外,大家也会发现,SpringMVC的Resolver(解析器)是个很关键的东西,需要什么样的处理,就引入
什么样的解析器就行了。
【Controller代码】
package com.xbs.ready.ssh.controller;import com.alibaba.fastjson.JSON;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;/*** 文件上传的Controller** @author ssg*/
@Controller
@RequestMapping("upload")
public class FileUploadController { private static final String FILE_PATH = "C:/uploaddir"; @RequestMapping(value = "one", method = RequestMethod.POST)
@ResponseBody
public String uploadFile(HttpServletRequest request, HttpServletResponse
response) throws IOException {
//String fileName = (String)request.getAttribute("filename");
MultipartHttpServletRequest multipartRequest =
(MultipartHttpServletRequest) request;
Iterator<String> fileNames = multipartRequest.getFileNames();
MultipartFile multipartFile = multipartRequest.getFile(fileNames.next());
//如果使用firebug,或者chrome的开发者工具,可以看到,这个文件上传工具发送了两个文件名
//分别是:name="Filedata"; filename="AVScanner.ini"
//用这两个文件名获得文件内容都可以,只不过第一个没有后缀,需要自己处理
//第二个是原始的文件名,但是这个文件名有可能是上传文件时的全路径
//例如 C:/testssh/a.log,如果是全路径的话,也需要处理
String fileAlias = multipartFile.getName();
System.out.println("Spring MVC获得的文件名:" + fileAlias);
//获得文件原始名称
String name = multipartFile.getOriginalFilename();
String filePath = FILE_PATH + "/" + name;
saveFile(filePath, multipartFile.getBytes());
Map<String, String> resultMap = new HashMap<String, String>(5);
resultMap.put("result", "success");
resultMap.put("filePath", filePath);
return JSON.toJSONString(resultMap);
} //保存文件的方法
public void saveFile(String filePath, byte[] content) throws IOException {
BufferedOutputStream bos = null;
try {
File file = new File(filePath);
//判断文件路径是否存在
if (!file.getParentFile().exists()) {
//文件路径不存在时,创建保存文件所需要的路径
file.getParentFile().mkdirs();
}
//创建文件(这是个空文件,用来写入上传过来的文件的内容)
file.createNewFile();
bos = new BufferedOutputStream(new FileOutputStream(file));
bos.write(content);
} catch (FileNotFoundException e) {
throw new FileNotFoundException("文件不存在。");
} finally {
if (null != bos) {
bos.close();
}
}
}}
【HTML代码】
html文件路径:.../webapp/views/upload.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="http://localhost:8080/sshdemo/static/css/uploadify.css"> <script type="text/javascript" src="http://localhost:8080/sshdemo/static/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://localhost:8080/sshdemo/static/js/jquery.uploadify.js"></script> <meta name="viewport" content="width=device-width"> <title>文件上传</title> <script type="text/javascript"> $(document).ready(function() { fileUpload(); }); function fileUpload() { $("#upload").uploadify({ "uploader": "http://localhost:8080/sshdemo/upload/one", "method": "post", "progressData": "percentage", "swf": "http://localhost:8080/sshdemo/static/flash/uploadify.swf", "buttonText": "选择要上传的文件", "multi": true, "fileSizeLimit": "100KB", "queueSizeLimit": 5, "successTimeout": 600, "onUploadSuccess": function(file, data, response) { alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data); }, "onUploadError": function(file, errorCode, errorMsg, errorString) { alert('The file ' + file.name + ' could not be uploaded: ' + errorString); }, "onSelectError": function() { alert('The file ' + file.name + ' returned an error and was not added to the queue.'); } }); } </script> </head> <body> <form enctype="multipart/form-data"> <input id="upload" type="file" /> </form> </body> </html>
访问
访问路径:http://localhost:8080/sshdemo/views/upload.html
(或者通过访问Controller,然后跳转回这个页面,不过不建议这样做,尽量不去
打扰服务端)
uploadify介绍
这里只简要介绍上面使用的几个参数,其余的可以参照官方文档(http://www.uploadify.com/documentation/ )
uploader:服务端处理上传文件的路径
"uploader": "http://localhost:8080/sshdemo/upload/one"
method:访问方式,post,get(这个访问方式要与服务的访问方式一致,否则405)
"method": "post"
progressData:上传进度,有percentage(百分比)和speed(进度条)两个值
"progressData": "percentage"
swf:动画文件的路径,因为要演示上传进度,所以需要动画(这个文件在官网的zip包里有,可以直接
使用)
"swf": "http://localhost:8080/sshdemo/static/flash/uploadify.swf"
buttonText:上传按钮的名字
"buttonText": "选择要上传的文件"
multi:是否可一次上传多个文件,true:可以,false:不可以(默认false)
"multi": true
fileSizeLimit:文件大小的限制(这里指单个文件),单位可以有B,KB,MB,和GB,默认是KB,
不过建议显式指定,方便理解;这个参数设置也可以代替在后台的配置文件中指定可上传文件的大小
"fileSizeLimit": "100KB"
queueSizeLimit:可上传文件的个数,如果不指定那么没有上限,建议指定的好
"queueSizeLimit": 5
successTimeout:上传文件后,多长时间服务端没有响应就意为上传成功,单位是秒(这时可能服务端
出错了,但是服务端处理的时间超过了这里设置的时间,那么插件会认为上传成功了)
"successTimeout": 60
onUploadSuccess:上传文件成功后,触发的事件
@Param file:上传成功的那个文件对象
@Param data:服务端返回的数据,这个例子中返回的是JSON数据
@Param response:服务端的响应,true 或者 false(注意:如果服务端在超过了
successTimeout之后返回了false,那么插件依然会返回true) "onUploadSuccess": function(file, data, response) {alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
}
onUploadError:上传文件失败后,触发的事件
@Param file:上传的文件对象
@Param errorCode:错误代码(这个代码是插件返回的,不是服务端)
@Param errorMsg:错误信息(插件返回的错误信息)
@Param errorString:详细的错误信息"onUploadError": function(file, errorCode, errorMsg, errorString) {alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
}
onSelectError:选择上传文件出错时(例如 queueSizeLimit=5,但是选择了6个文件),可以触发这个
事件;文件上传失败时,也可以触发这个事件
@Param file:上传的文件对象
@Param errorCode:错误代码(QUEUE_LIMIT_EXCEEDED,FILE_EXCEEDS_SIZE_LIMIT,ZERO_BYTE_FILE,INVALID_FILETYPE)
@Param errorMsg:错误信息
"onSelectError": function() {alert('The file ' + file.name + ' returned an error and was not added to the queue.');
}
这里就介绍这几个参数了,官网还有好多参数,触发事件,方法等,等以后用到了再介绍吧。
【问题说明】
由于没有保存之前的错误信息,所以暂时没有什么问题要解决了,要个各位有问题
的话,可以提出来。
SpringMVC+uploadify文件上传相关推荐
- 【SSM框架系列】SpringMVC的文件上传、拦截器及异常处理
SpringMVC的文件上传 服务器端实现文件上传的技术有很多种,Servlet3.0,FileUtils,框架等等,都可以实现文件上传,不管使用哪一种上传技术,都必须满足三要素: 表单项type=& ...
- struts2和springmvc实现文件上传
struts2 struts有专门的文件上传功能,struts的Action已经脱离了servlet容器的范围,所以servlet中的smartupload不是很方便使用,甚至初始化servletCl ...
- SpringMVC学习--文件上传
简介 文件上传是web开发中常见的需求之一,springMVC将文件上传进行了集成,可以方便快捷的进行开发. springmvc中对多部件类型解析 在 页面form中提交enctype="m ...
- springmvc图片文件上传接口
springmvc图片文件上传 用MultipartFile文件方式传输 Controller package com.controller;import java.awt.image.Buffere ...
- SpringMVC实现文件上传
1.文件上传之上传原理分析和搭建环境 springmvc文件上传也会用到Javaweb实现文件上传的组件. 1.1文件上传的必要条件 A .form 表单的 enctype 取值必须是:multipa ...
- springMVC的文件上传于下载
springMVC的文件上传于下载 1.springmvc 文件的上传也是借助于两个工具所以需要添加两个jarapache-commons-fileupload.jarapache-commons-i ...
- java day62【 响应数据和结果视图 、 SpringMVC 实现文件上传 、 SpringMVC 中的异常处理 、 SpringMVC 中的拦截器 】...
第1章 响应数据和结果视图 1.1返回值分类 1.1.1 字符串 1.1.2 void 1.1.3 ModelAndView 1.2转发和重定向 1.2.1 forward 转发 1.2.2 Redi ...
- SpringMVC之文件上传和文件下载
1. 文件上传 在web开发中一般会有文件上传的操作 一般JavaWeb开发中文件上传使用的 Apache组织的Commons FileUpload组件 SpringMVC中使用 Multipart ...
- SpringMVC的文件上传和拦截器
目录 一.文件上传 1.概述 2.案例1 3.案例2 二.拦截器 1.HandlerInterceptor接口 2.案例:拦截器实现用户权限验证 一.文件上传 1.概述 SpringMVC会将上传文件 ...
最新文章
- MySQL慢查询日志总结
- sql注入 1-1_基于报错的注入
- Python学习笔记6(列表生成式)
- hazelcast入门教程_Hazelcast入门指南第4部分
- 8002.ros2入门概念
- mysql语句1=1_mysql - “where 1 = 1”语句
- Asp.net MVC Linq to SQL Model verification
- java ajaxupload_Java中利用ajaxfileupload.js组件实现文件的上传功能
- 大数据分析优劣势有哪些
- Java常用算法-二分查找算法(两种方法实现)
- 计算机操作系统安全序列详解,操作系统知识梳理
- php第三方支付宝支付,第三方对接-支付宝支付接入教程
- 【论文】论文阅读记录
- 【Unity3D实战】零基础一步一步教你制作酷跑类游戏(1)
- 硬盘插上后提示“设备未就绪”の解决方案
- 再谈windows下创建特殊文件夹
- 中断机制及ZCU102 DMA中断实例
- Spring入门第一讲——Spring框架的快速入门
- Oracle启用scott两种方法
- 杰理AC692X---简介(1)
热门文章
- go 写文件_「go」 项目多个文件编程
- python爬虫的用途_python爬虫用途
- python语言中内置的字符串排版方法_Python14之字符串(各种奇葩的内置方法)
- python有哪些常用的package_个人Python常用Package及其安装
- [转载] JVM(一):JVM体系结构详解
- scala中循环守卫_Scala中的循环
- 职称计算机提前考试试卷,职称计算机考试多项选择考试卷模拟考^试题
- vb读出二进制文件,合并两个文件
- 算法复习第四章动态规划
- 每天一个linux命令博客nano,11 个鲜为人知的 Linux 命令(1)