【java】批量上传图片并回显功能
来源:互联网 发布:爱奇艺vip破解版 mac 编辑:程序博客网 时间:2024/05/17 08:19
一、前言
在电商的网站中,图片上传功能必不可少,小编在最近的项目中就有遇到了一个批量上传图片并且要回显的功能。可以说这是一个很常见的功能了,已经烂大街了,但是小编还是要认真的分析一下,以便日后用到。
二、上传功能分析
我实现的上传框架是JQuery+SpringMvc+spring+FastDFS。
前台借助KindEditor的上传文件的插件,从而达到上传和回显的功能。关于KindEditor的使用,小编会在后面的文章中向大家介绍。
实现的效果如下:
实现流程:
点击上传图片,会弹出“批量图片上传”的模态窗体,点击添加图片,就可以选择要添加的图片,可以选择一张,也可以选择多张,点击开始上传就会把选中的图片上传到FastDFS上面,然后回显到空白的位置。
三、功能实现
3.1 前台编写
上传图片按钮:
页面初始化完毕后执行js中 的代码,它会创建一个富文本编辑器,然后进行初始化,初始化的时候,会调用Common.js中的createEditor方法,创建一个富文本编辑器。
然后又会调用init方法,来实例化一个Common.js中的实例,初始化图片上传器。
<form id="itemAddForm" class="itemForm" method="post"> <a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上传图片</a></form><script type="text/javascript"> var itemAddEditor ; //页面初始化完毕后执行此方法 $(function(){ //创建富文本编辑器 itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]"); //初始化图片上传器 TAOTAO.init({fun:function(node){ }}); });</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
Commom.js:
var TT = TAOTAO = { // 编辑器参数 kingEditorParams : { //指定上传文件参数名称,Controller中接收参数使用的参数名 filePostName : "uploadFile", //指定上传文件请求的url。 uploadJson : '/pic/upload', //上传类型,分别为image、flash、media、file dir : "image" }, createEditor : function(select){ return KindEditor.create(select, TT.kingEditorParams); }, init : function(data){ // 初始化图片上传组件 this.initPicUpload(data); }, // 初始化图片上传组件 initPicUpload : function(data){ $(".picFileUpload").each(function(i,e){ var _ele = $(e); _ele.siblings("div.pics").remove(); _ele.after('\ <div class="pics">\ <ul></ul>\ </div>'); // 回显图片 if(data && data.pics){ var imgs = data.pics.split(","); for(var i in imgs){ if($.trim(imgs[i]).length > 0){ _ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>"); } } } //给“上传图片按钮”绑定click事件 $(e).click(function(){ var form = $(this).parentsUntil("form").parent("form"); //打开图片上传窗口 KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){ var editor = this; editor.plugin.multiImageDialog({ clickFn : function(urlList) { var imgArray = []; KindEditor.each(urlList, function(i, data) { imgArray.push(data.url); form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>"); }); form.find("[name=image]").val(imgArray.join(",")); editor.hideDialog(); } }); }); }); }); }};
- 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
- 51
- 52
- 53
- 54
- 55
- 56
- 57
3.2 后台的编写
后台使用,就必须要先导入两个jar包:
Commons-io.jar
Commons-fileupload.jar
然后在springmvc.xml中配置多媒体解析器:
<!-- 配置多媒体解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 设定默认编码 --> <property name="defaultEncoding" value="UTF-8"></property> <!-- 设定文件上传的最大值5MB,5*1024*1024 --> <property name="maxUploadSize" value="5242880"></property> </bean>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
响应的内容:
- 约定大于配置
返回格式(JSON):
//成功时{ "error" : 0, "url" : "http://www.example.com/path/to/file.ext"}//失败时{ "error" : 1, "message" : "错误信息"}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
需要创建一个pojo描述返回值。
Pojo中有三个属性:error、url、message。
public class PictureResult { private int error; private String url; private String message; public int getError() { return error; } public void setError(int error) { this.error = error; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; }}
- 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
3.2.1 Service层
接收图片数据,把图片上传到图片服务器,返回PictureResult 。需要使用FastDFSClient工具类。
参数:MultiPartFile pictureFile
返回值:PictureResult
@Servicepublic class PictureServiceImpl implements PictureService { @Override public PictureResult uploadPic(MultipartFile picFile) { PictureResult result = new PictureResult(); //判断图片是否为空 if (picFile.isEmpty()) { result.setError(1); result.setMessage("图片为空"); return result; } //上传到图片服务器 try { //取图片扩展名 String originalFilename = picFile.getOriginalFilename(); //取扩展名不要“.” String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1); FastDFSClient client = new FastDFSClient("classpath:properties/client.conf"); String url = client.uploadFile(picFile.getBytes(), extName); //把url响应给客户端 result.setError(0); result.setUrl(url); } catch (Exception e) { e.printStackTrace(); result.setError(1); result.setMessage("图片上传失败"); } return result; }}
- 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
3.2.2 Controller
接收上传的图片信息,调用Service把图片上传到图片服务器。返回json数据。需要使用@ResponseBody
@Controllerpublic class PictureController { @Autowired private PictureService pictureService; @RequestMapping("/pic/upload") @ResponseBody public PictureResult uploadFile(MultipartFile uploadFile) { PictureResult result = pictureService.uploadPic(uploadFile); return result; }}
- 【java】批量上传图片并回显功能
- 【java】批量上传图片并回显功能
- Java 上传图片和批量上传图片
- java 图片批量上传 html5
- java FTP批量上传图片
- CkEditor批量上传图片(java)
- 车型库项目图片批量上传功能
- webuploader实现批量图片上传功能
- php批量上传图片并预览
- 实现上传图片并预览功能
- html5预览并上传图片的功能
- java web 图片上传功能
- java 上传并压缩图片
- Java上传图片并预览
- 轻松实现图片上传并回显
- 卡住:图片上传并回显
- input file图片上传并回显
- 上传图片、批量上传图片
- 搭建FTP服务
- Oracle:列别名
- redis的安装
- MySQL索引背后的数据结构及算法原理
- Python中的生产者与消费者模式
- 【java】批量上传图片并回显功能
- margin值与百分数的关系
- Linux学习记录—用户_用户组_权限_网络互连
- 打造前端 Deepin Linux 工作环境——配置 XAMPP 集成环境
- 5、Oracle的排序
- UE4 补丁更新(基于Http)
- day04笔记
- 对迭代器,生成器,yield的备忘
- 草稿