- 前言
- 第一部分 基础应用开发
- 第 1 章 Spring Boot 入门
- 第 2 章 在 Spring Boot 中使用数据库
- 第 3 章 Spring Boot 界面设计
- 第 4 章 提高数据库访问性能
- 第 5 章 Spring Boot 安全设计
- 第二部分 分布式应用开发
- 第 6 章 Spring Boot SSO
- 第 7 章 使用分布式文件系统
- 第 8 章 云应用开发
- 第 9 章 构建高性能的服务平台
- 第三部分 核心技术源代码分析
- 第 10 章 Spring Boot 自动配置实现原理
- 第 11 章 Spring Boot 数据访问实现原理
- 第 12 章 微服务核心技术实现原理
- 附录 A 安装 Neo4j
- 附录 B 安装 MongoDB
- 附录 C 安装 Redis
- 附录 D 安装 RabbitMQ
- 结束语
7.3 使用定制方式上传图片
所谓定制方式,就是设计一个图片选择框,可以使用调整大小和选择取图范围等手段设定上传的图片文件。
7.3.1 实体建模
为了演示文件上传,使用 Neo4j 数据库创建一个商品节点实体,如代码清单 7-7 所示。程序中省略了 Getter 和 Setter 方法,这些方法可以用 IDEA 编辑器自动生成,其中 picture 属性用来保存单个图片的链接地址,contents 属性用来保存在富文本编辑器中编辑的内容,其他属性如名称、简要说明、定价等结合起来主要体现一个商品的基本信息。
代码清单 7-7 商品节点实体建模
@NodeEntity public class Goods { @GraphId private Long id; private String name; private String brief; private String picture; private String price; private String contents; @DateLong @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") private Date create; private Long shopid;…… }
7.3.2 上传图片
1.上传图片对话框设计
在编辑商品的过程中上传图片时,将打开一个上传图片对话框,对话框使用 JavaScript 设计,如代码清单 7-8 所示。在对话框中设计了三个按钮,分别是确定、删除和取消,其中确定按钮将调用 sureChoose 方法对图片进行裁剪,然后将上传图片的链接地址导入编辑商品的页面,由商品编辑的页面保存。“/pic/upload”是连接控制器的 URL,使用这个链接将由控制器返回对话框的上传图片页面设计“uploa-pic.html”。
代码清单 7-8 上传图片对话框设计
function picUp() { var picWidth = 720, picHeight = 400, callback = setImgUrl; var isSubmit = false; rt = pic.dialog.show({ src: "/pic/upload", name: "_uploadPic_iframe", title: "上传图片 ", width: 750, height: 550, titleLineType: 'g-topbg', btn: { yes: "确定 ", del: "删除 ", no: "取消 ", no_style: 'white', del_style: 'orange', yes_before_close: function (win) { if (!isSubmit) { isSubmit = true; win.sureChoose(function (data) { if (data) { callback(data); rt.hide(); } else { isSubmit = false; } }); } return false; }, del_before_close: function (win) { win.delChoose(function (data) { if (data) { delImaConfirm(data); } }); } }, load: function (win) { win.page.upload.init(picWidth, picHeight); } }); }
2.上传图片页面设计
代码清单 7-9 是设计上传图片页面的部分 HTML 代码,其中通过一个类型为 file 的输入文本框,从本地中选择需要上传的图片文件,然后将图片展示在编辑界面上。在编辑界面上,使用了一个图片选择框,这样,不但可以调整上传图片的宽度和高度,还可以在图片中选择特定的区域进行裁剪。
代码清单 7-9 上传图片页面设计
<div class="img-view"> <div class="up-tit">下图为您的图片展示,请注意是否清晰。 </div> <div class="upload-box"> 单击上传 <input id="pictureFile" name="pictureFile" type="file" class="file" onchange="uploadPic_submit(this)"/> </div> <div class="view-box"> <div class="view" id="view"><img/></div> <input type="hidden" value="" id="p1"/><!-- 左上坐标 --> <input type="hidden" value="" id="p2"/><!-- 右上坐标 --> <input type="hidden" value="" id="p3"/><!-- 右下坐标 --> <input type="hidden" value="" id="p4"/><!-- 左下坐标 --> </div> <div class="file-type">支持类型: jpg、 jpeg、 png。 <span class="error">格式不正确 </span></div> <div class="reupload"> <div class="l"> <div class="newUpDiv"><p>选择文件 </p> <input id="changeFile" class="g-btn g-btn-white"name="pictureFile" type="file" onchange="uploadPic_submit(this)"/> </div> </div> <div class="clear"></div> </div> </div>
在上传图片的对话框中单击上传文件后,将调用 ajaxFileUpload 方法,如代码清单 7-10 所示。其中的链接地址“/pic/uploadPic”将调用文件上传控制器,实现文件上传功能。
代码清单 7-10 上传文件的 Ajax 方法定义
function ajaxFileUpload(id){ var url = '/pic/uploadPic'; $.ajaxFileUpload({ url : url, // 需要链接到服务器地址 fileElementId : id, // 文件选择框的 id 属性 dataType : 'json', // 服务器返回的格式,可以是 json success : function(data) { if(data.errorMsg){ showMsg(data.errorMsg, "错误 "); }else{ page.upload.finish(data.pathInfo,data.width,data.height); } } }); }
3.上传图片控制器设计
上传图片控制器的设计,将调用 7.2.2 节定义的 FastefsClient 服务类,直接与 FastFDS 服务器打交道,如代码清单 7-11 所示。这里必须注意区别以下两种类型的文件路径:
filename:这是 FastefsClient 使用的与 FastFDS 服务器进行交互通信时使用的文件路径,它由组名、路径和文件名组成。
pathHead+filename:这是可以在浏览器的页面上使用的完整图片文件路径,pathHead 由 Tracker Server 的域名或 IP 地址及其端口组成。
将在数据库中保存 filename 和 pathHead 这两个属性,在页面视图中调用的返回参数中,使用了 pathInfo(pathHead+filename)参数返回文件的完整路径。
代码清单 7-11 上传图片控制器设计
@Value("${file.path.head:http://192.168.1.214:84/}") private String pathHead; @Autowired private FastefsClient fastefsClient; @RequestMapping(value = "/uploadPic", method = RequestMethod.POST) public void uploadPic(@RequestParam("pictureFile") MultipartFile multipartFile,HttpServletRequest request,HttpServletResponse response) { try { String filename = fastefsClient.uploFile(multipartFile); Long shopid = 1L; …… BufferedImage image = ImageIO.read(multipartFile.getInputStream()); Map<String, Object> data = new HashMap<String, Object>(); data.put("pathInfo", pathHead+filename); data.put("width", image.getWidth()); data.put("height", image.getHeight()); ObjectMapper mapper = new ObjectMapper(); String ret = mapper.writeValueAsString(data); response.setContentType("text/html;charset=utf8"); response.getOutputStream().write(ret.getBytes()); response.flushBuffer(); }catch (IOException e){ e.printStackTrace(); } }
4.上传图片效果图
上面设计最终的运行效果如图 7-2 所示。因为使用了定制的方式,也就是使用图片选择框重新选择和调整上传的图片,所以这个过程完成后,后台会对已经上传的文件进行裁剪,裁剪后删除原来的旧文件,并保存裁剪下来的新文件。
图 7-2 使用定制方式上传图片的效果图
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论