简单的图片上传功能
2017-12-22 13:50
134 查看
layui的上传插件和java后台的实现
首先了解一下layui:http://www.layui.com/doc/modules/upload.html
上传后展示图片的效果:
js部分代码:
后台实现:
FileUtil工具类:
Controller层:
实体 Image类:
本案例是将图片保存到数据库中。
首先了解一下layui:http://www.layui.com/doc/modules/upload.html
上传后展示图片的效果:
js部分代码:
<button type="button" class="layui-btn" id="test1"> <i class="layui-icon"></i>上传图片 </button> <div class="layui-upload-list"> <img style="width:120px;height: 120px;" class="layui-upload-img" id="demo1"> <p id="demoText"></p> </div> <script src="/static/build/layui.js"></script> <script> layui.use('upload', function(){ var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#test1' //绑定元素 ,url: '/upload/' //上传接口 ,done: function(res){ if (res.code == 0) { //回调显示图片 $('#demo1').attr('src','<%=basePath%>file/img.do?name='+res.name); layer.msg(res.msg); } } ,error: function(){ //请求异常回调 } }); }); </script>
后台实现:
FileUtil工具类:
public class FileUtils { private static final String FILE_PATH = "D://testUpload"; public static Image getImage(MultipartFile file) { String fileName = file.getOriginalFilename().substring(0,file.getOriginalFilename().indexOf(".")); Image image = new Image(); try { InputStream inputStream = file.getInputStream(); byte[] buff = null; int i = inputStream.available(); // byte数组用于存放图片字节数据 buff = new byte[i]; inputStream.read(buff); // 记得关闭输入流 inputStream.close(); image.setName(fileName); image.setImage(buff); } catch (IOException e) { e.printStackTrace(); } return image; } }
Controller层:
/** * 图片上传 * @param file * @param request * @return */ @RequestMapping("/uploadImage") @ResponseBody public Map<String, Object> upLoadImage(MultipartFile file, HttpServletRequest request) { Map<String, Object> map = new HashMap& a526 lt;String, Object>(); try { Image image = FileUtils.getImage(file); if (image != null) { int result = fileService.saveImage(image); map.put("name", image.getName()); map.put("code", 0); map.put("msg", "上传成功"); } else { map.put("code", 1); map.put("msg", "上传失败"); } } catch (Exception e) { e.printStackTrace(); map.put("code", 2); map.put("msg", "异常,上传失败!!!"); } return map; } /** * 图片显示 * @param request * @return */ @RequestMapping("/img") @ResponseBody public byte[] getImage(HttpServletRequest request) { String name = request.getParameter("name"); return fileService.getImageByName(name).get(0).getImage(); }
实体 Image类:
public class Image implements Serializable { private static final long serialVersionUID = -1323571281816600020L; private String id; private String name; private byte[] image; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public byte[] getImage() { return image; } public void setImage(byte[] image) { this.image = image; } }
本案例是将图片保存到数据库中。
相关文章推荐
- ASP.NET简单好用功能齐全图片上传工具类(水印、缩略图、裁剪等)
- 用jsp实现简单的图片上传功能(multipart/form-data形式的表单)
- ASP.NET简单好用功能齐全图片上传工具类(水印、缩略图、裁剪等)
- 用MVC实现简单的文件(图片)上传下载功能
- 简单实现jQuery上传图片显示预览功能
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- 一个简单的上传图片功能
- 用jsp实现简单的图片上传功能
- 一个简单实现了PHP图片上传功能
- 简单!!!!kindeditor隐藏上传图片框网络图片或本地上传的功能
- Summernote实现图片上传功能的简单方法
- 用jsp实现简单的图片上传功能
- 简单实现JS上传图片预览功能
- ASP.NET 图片上传工具类 upload image简单好用功能齐全
- JQ图片文件上传之前预览功能的简单实例(分享)
- ASP.NET简单好用功能齐全图片上传工具类(水印、缩略图、裁剪等)
- Java实现的简单图片上传功能示例
- ASP.NET 图片上传工具类 upload image简单好用功能齐全
- ASP.NET简单上传图片功能
- 简单实现java上传图片文件功能