jquery.uploadify+spring mvc实现上传图片
一、前端页面
1.下载jquery.uploadify
去uploadify官网（http://www.uploadify.com/download/ ）下载压缩包，解压后放在如下路径：
2.html结构
form表单的上传控件部分：
|
1
2
3
4
5
6
7
8
|
<div class="control-group">
<label class="control-label" for="coverImage">代表图</label>
<div class="controls">
<input type="hidden" th:field="*{coverImage}">
<input class="input-file" id="fileInput" type="file">
<img id="previewCoverImage" src="#">
</div>
</div>
|
3.页面引入uploadify
|
1
2
|
<link rel="stylesheet" th:href="@{/static/uploadify/uploadify.css}”>
<script type="text/javascript" th:src="@{/static/uploadify/jquery.uploadify.js}"></script>
|
4.自定义上传代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<script th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function () {
$("#fileInput").uploadify(
{
'swf': /*[[@{/static/uploadify/uploadify.swf}]]*/,
'uploader': /*[[@{/upload/uploadCoverImage}]]*/, //后台action地址
'queueID': 'fileQueue',
'auto': true,
'multi': false,
'buttonText': '上传图片',
'fileObjName': 'pic', //对应action中的参数字段名称
'width': 70,
'height': 20,
'onUploadSuccess': function (file, data, response) {
if (data != null) {
$("#coverImage").val(data); //赋值给hidden控件，便于提交form表单
$("#previewCoverImage").attr("src",data); //复制给img控件用来预览
}
}
});
});
/*]]>*/
</script>
|
二、站点配置
1.调整springmvc-servlet.xml文件，添加配置支持文件上传
|
1
2
|
<!-- 支持上传文件 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
|
2.添加maven依赖
|
1
2
3
4
5
|
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
|
三、后台代码
1.controller
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
@Controller
@RequestMapping("/upload")
public class UploadController {
@RequestMapping(value = "/uploadCoverImage", method = RequestMethod.POST)
@ResponseBody
public String uploadCoverImage(@RequestParam("pic") CommonsMultipartFile pic, HttpServletRequest req, HttpServletResponse response) throws IOException {
//上传文件信息
String fileName = pic.getOriginalFilename();
String fileType = fileName.split("[.]")[1];
//生成文件信息
String filePath = req.getSession().getServletContext().getRealPath(FilePathConst.COVER_IMAGE_UPLOAD);
String uuid = UUID.randomUUID().toString().replace("-", "");
String uuidFileName = uuid + fileName;
//保存文件
File f = new File(filePath + "/" + uuid + "." + fileType);
FileUtils.uploadFile(pic.getInputStream(), uuidFileName, filePath);
return SiteConst.SITE_DOMAIN + FilePathConst.COVER_IMAGE_UPLOAD + uuidFileName;
}
}
|
2.FileUtils工具类
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
public class FileUtils {
public static void uploadFile(InputStream is, String fileName, String filePath) {
FileOutputStream fos = null;
BufferedOutputStream bos = null;
BufferedInputStream bis = null;
File file = new File(filePath);
if (!file.exists()) {
file.mkdirs();
}
File f = new File(filePath + "/" + fileName);
try {
bis = new BufferedInputStream(is);
fos = new FileOutputStream(f);
bos = new BufferedOutputStream(fos);
byte[] bt = new byte[4096];
int len;
while ((len = bis.read(bt)) > 0) {
bos.write(bt, 0, len);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (null != bos) {
bos.close();
bos = null;
}
if (null != fos) {
fos.close();
fos = null;
}
if (null != is) {
is.close();
is = null;
}
if (null != bis) {
bis.close();
bis = null;
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
|
本文转自 陈敬（Cathy） 博客园博客，原文链接：http://www.cnblogs.com/janes/p/7611980.html，如需转载请自行联系原作者
jquery.uploadify+spring mvc实现上传图片相关推荐
- mvc 一般注释_使用带有注释和JQuery的Spring MVC 3的Ajax
mvc 一般注释 与Ajax一起工作对我来说一直很有趣! 是不是 ? 我将使您轻松将Ajax与Spring MVC 3和JQuery结合使用. 这篇文章将向您说明如何在工业编码的现实生活中使用Ajax ...
- 你的第一杯Web 2.0 —— 快速浏览jQuery、Spring MVC和XStream/Jettison
不再有页面刷新:使用jQuery 相关厂商内容 免费迷你书下载:Flex入门指南--PHP开发者 Flash Builder 4 Beta和FlexUnit下的测试驱动开发 下载Flex 4 SDK, ...
- xstream-1.4.4_您的第一届Web 2.0杯-jQuery，Spring MVC和XStream / Jettison快速浏览
xstream-1.4.4 没有更多页面刷新:使用jQuery! 这是我帮助建立的网站用户的公开道歉:"对不起,我因不必要的页面刷新而使您受苦." 这是今年早些时候学习jQuery ...
- 使用带有注释和JQuery的Spring MVC 3的Ajax
与Ajax一起工作对我来说一直很有趣! 是不是 ? 我将使您轻松将Ajax与Spring MVC 3和JQuery结合使用. 这篇文章将向您说明如何在工业编码的现实生活中使用Ajax. 和往常一样,我 ...
- C# 一般处理程序+jquery.uploadify.js 多文件上传图片/文件
效果图: 首先引入: <script src="assets/js/jquery-1.8.2.min.js"></script> & ...
- B2C商城项目源码，基于Java开发的高可用分布式B2C商城系统，Java+Spring MVC+Dubbo+Zookeeper+MySQL+Redis+FastDFS+Nginx+Solr
目录 前言 B2C商城-AIYOU 一.项目总体架构 二.系统软硬件设施总体规划 1.系统服务规划 2.应用服务规划 3.应用系统域名规划 三.系统运行环境构建 四.项目数据库创建 五.项目拉取 六. ...
- MVC中使用jquery uploadify上传图片报302错误
使用jquery uploadify上传图片报302错误研究了半天,发现我上传的action中有根据session判断用户是否登录,如果没有登录就跳到登陆页,所以就出现了302跳转错误.原来更新了fl ...
- ssm 上传图片到mysql_ssm(Spring+Spring MVC+MyBatis)+Web Uploader开发图片文件上传实例,支持批量上传,拖拽上传,复制粘贴上传...
项目描述 ssm开发一个上传图片的项目 用百度的插件 Web Uploader 上传,不会的去它的官网找API文档 官网的API文档还是比较 坑的.... 百度插件 Web Uploader 上传文 ...
- Spring MVC：Ajax和JQuery
今天,我想演示如何将AJAX集成到Spring MVC应用程序中. 我将在客户端使用JQuery来发送请求和接收响应. 本教程将基于我以前关于Spring MVC和REST服务的教程之一. 在本文中, ...
最新文章
- snort完整安装（snort-2.8.3.1）
- ResultSet 的相关介绍
- Luogu P1160 【队列安排】
- git-ssh-keygen
- 阿里达摩院提出新型优化方法，一行代码即可替换现有优化器
- php找不到库,64位系统下编译PHP找不到库文件问题 | 学步园
- 实现远程访问局域网内的多台电脑
- [转载] 不少Gate或Node运算子 的反向传播代码
- 【OpenCV新手教程之十四】OpenCV霍夫变换：霍夫线变换，霍夫圆变换合辑
- 【ArcGIS|空间分析】地形特征相关计算
- 比特币技术Base58
- 树莓派红外避障小车python_制作树莓派wifi遥控和自动避障小车
- 资源 | 11个免费矢量免抠素材网站
- 剑指chatGPT，马斯克：你们暂停一下，我追赶追赶
- python极坐标绘图_Python 画极坐标图
- 容器学习Day09-理解容器镜像
- 多效蒸发课程设计php程序
- 牛客网刷题——二叉树
- 软件开发V模型--解读
- 创建类的三个步骤_如何通过5个简单的步骤创建企业网站