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，如需转载请自行联系原作者