EXTjs+SpringMVC+Mybatis实现照片的上传，下载，查看关键技术整理

第一个问题：如何通过Extjs4实现照片上传的布局展示以及本地照片选择后的在一个区域内进行图片预览

实现照片上传的布局展示：

items : [ {xtype : 'box',itemId : 'imageShow',id:'imageShow',border : 1,style : {borderColor : '#99bbe8',borderStyle : 'solid',},margin : '0 0 5 55',autoEl : {width : 105,height : 128,tag : 'img',//style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);', complete : 'off',src : 'images/blank.jpg',}}, {xtype : 'filefield',name : 'imageFile',itemId:'imageFile',id:'person_imageFile',labelWidth : 50,width : 200,fieldLabel : '照片',allowBlank : false,buttonText: '',buttonConfig: {iconCls: 'upload-icon'}} ]

显示的样式为：

第二个问题：如何在chrome中选择本地的照片后进行图片的预览：（对file控件进行监控）

'#personWindow #imageFile' : {change : this.handlerImageFile},

handlerImageFile:function(view,value){var file=Ext.query('#person_imageFile input[type=file]')[0];var img=view.previousSibling().getEl().dom;var reader = new FileReader();reader.onload = function(evt){img.src = evt.target.result;}reader.readAsDataURL(file.files[0]);},

第三个问题：如何跟SpringMVC结合保存照片呢？

1.含有照片的form，必须要通过form.submit来进行提交：

savePersonAction:function(button,urlString){var form = button.up('window').down('form').getForm();form.submit({clientValidation : true,url : urlString,params : {// newStatus: 'delivered'
            },scope : this,// 使回调函数中的this变成当前的类success : function(form, action) {if (action.result.success == 'true') {Ext.Msg.alert('系统提示', action.result.msg,function(){button.up('window').hide();this.refreshGrid();},this);} else {Ext.Msg.alert('系统提示', action.result.errorMsg);}},});}

2.在spring的配置文件中增加配置：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  <!-- one of the properties available; the maximum file size in bytes -->  <property name="maxUploadSize" value="100000"/>  <property name="maxInMemorySize" value="4096" /></bean>

3.在bean中增加配置

private Date csrq;private String jtzz;private String bz;private Integer photoId;private CommonsMultipartFile imageFile;//上传的文件

4.使用bean来接受参数：

@ResponseBody@RequestMapping("/userManage/person/insertPerson")public String insertPerson(SysPersonModel sysPersonModel) {Map resultMap = new HashMap();try {sysPersonService.insertPerson(sysPersonModel);resultMap.put("success", "true");resultMap.put("msg", "保存成功");} catch (ApplicationException e) {resultMap.put("success", "ApplicationException");resultMap.put("errorMsg", e.getMessage());} catch (Exception e) {e.printStackTrace();resultMap.put("success", "Exception");resultMap.put("errorMsg", e.getMessage());}return JSON.toJSONString(resultMap);}

第四个问题：如何在Mybatis中进行文件的保存和查看呢?

1.增加Photo相关的Bean以及Mapper类，以及sql文件：

package cn.telchina.standard.entity;public class PhotoModel {private Integer photoId;private String photoName;private Object photo;public Integer getPhotoId() {return photoId;}public void setPhotoId(Integer photoId) {this.photoId = photoId;}public String getPhotoName() {return photoName;}public void setPhotoName(String photoName) {this.photoName = photoName;}public Object getPhoto() {return photo;}public void setPhoto(Object photo) {this.photo = photo;}}

package cn.telchina.standard.mapper;import java.util.List;import cn.telchina.standard.entity.PhotoModel;public interface PhotoMapper {public int getPhotoId();public void createPhoto(PhotoModel photoModel);public int deletePhoto(int photoId);public int updatePhoto(PhotoModel photo);public  List<PhotoModel> getPhotoForUpdate(int photoId);public  List<PhotoModel> getPhoto(int photoId);}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.telchina.standard.mapper.PhotoMapper"><!-- <![CDATA[sql 尽量每个sql必须写，防止有些特殊字符对sql语句造成的破坏 --><select id="getPhotoId" resultType="int"><![CDATA[select base.seq_photo.nextval id from dual]]></select><insert id="createPhoto" parameterType="PhotoModel"> <![CDATA[INSERT INTO base.PHOTO(photoid,photoname,photo)VALUES(#{photoId},#{photoName, jdbcType=VARCHAR}, empty_blob())  ]]>  </insert>  <select id="getPhotoForUpdate" resultType="PhotoModel">  SELECT photoid,  photo,  photonameFROM base.PHOTOWHERE photoid = #{photoId} for update </select><delete id="deletePhoto" >  DELETE FROM base.PHOTOWHERE PHOTO_ID = #{photoId}  </delete>  <update id="updatePhoto" parameterType="PhotoModel" >  UPDATE base.PHOTO   SET photoname = #{photoName, jdbcType=VARCHAR}  WHERE photoid = #{photoId}  </update>  <select id="getPhoto" resultType="PhotoModel">  SELECT photoid,  photo,  photoname  FROM base.PHOTOWHERE photoid = #{photoId}  </select>
</mapper>

2.在service中增加新增照片的代码：

@Transactional(rollbackFor = Exception.class)public void insertPerson(SysPersonModel sysPersonModel)throws ApplicationException {this.checkPersonByRybh(sysPersonModel.getRybh());this.checkPersonBySfzhm(sysPersonModel.getSfzhm());int photoId = photoMapper.getPhotoId();String fileName = sysPersonModel.getImageFile().getOriginalFilename();PhotoModel photoModel = new PhotoModel();photoModel.setPhotoId(photoId);photoModel.setPhotoName(fileName);photoMapper.createPhoto(photoModel);updatePhoto(sysPersonModel, photoId);sysPersonModel.setPhotoId(photoId);sysPersonMapper.insertPerson(sysPersonModel);}private void updatePhoto(SysPersonModel sysPersonModel, Integer photoId) {List<PhotoModel> list = photoMapper.getPhotoForUpdate(photoId);PhotoModel newPhotoModel = list.get(0);BLOB photo = (BLOB) newPhotoModel.getPhoto();BufferedInputStream in = null;BufferedOutputStream out = null;try {out = new BufferedOutputStream(photo.getBinaryOutputStream());// 暂时使用这个废弃的方法// ops = content.setBinaryStream(0);//ojdbc14支持,ojdbc6,5都不支持in = new BufferedInputStream((FileInputStream) sysPersonModel.getImageFile().getInputStream());byte[] data = FileCopyUtils.copyToByteArray(in);out.write(data);} catch (Exception e) {e.printStackTrace();} finally {try {if (in != null) {in.close();}if (out != null) {out.close();}} catch (IOException e) {e.printStackTrace();}}}

3文件的展示和下载：

前台代码：

//进入新增页面时初始化默认头像initImageSrc:function(view){if(view.down('#imageShow').getEl()){var img=view.down('#imageShow').getEl().dom;img.src='images/blank.jpg';}},
//查看showImg:function(view,photoId){if(photoId!=""){var img=view.down('#imageShow').getEl().dom;img.src='userManage/person/showPhoto.json?photoId='+photoId;}else{this.initImageSrc(view);}},
//下载
downFileButtonHandler:function(button){var sm = button.up('#datagrid').getSelectionModel();if (sm.getCount() == 0) {Ext.Msg.alert('系统提示', "修改人员信息前先选中一条记录！");} else {var record = sm.getSelection()[0];var photoId=record.data.photoId;if(photoId!=""){window.open('userManage/person/downFile.json?photoId='+photoId,"_self");}else{Ext.Msg.alert('系统提示', "该人员没有头像！");}}},

@ResponseBody@RequestMapping(value = "/userManage/person/showPhoto")public void showPhoto(Integer photoId, HttpServletResponse response) {OutputStream outputStream = null;InputStream in = null;try {PhotoModel photoModel = sysPersonService.getPhotoById(photoId);BLOB photo = (BLOB) photoModel.getPhoto();response.setContentType("image/jpeg");response.setCharacterEncoding("UTF-8");outputStream = new BufferedOutputStream(response.getOutputStream());in = new BufferedInputStream(photo.getBinaryStream());int len = 0;byte[] buf = new byte[1024];while ((len = in.read(buf, 0, 1024)) != -1) {outputStream.write(buf, 0, len);}} catch (ApplicationException e) {// TODO Auto-generated catch block
            e.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch block
            e.printStackTrace();} catch (Exception e) {// TODO Auto-generated catch block
            e.printStackTrace();} finally {try {in.close();outputStream.flush();outputStream.close();} catch (IOException e) {// TODO Auto-generated catch block
                e.printStackTrace();}}}@ResponseBody@RequestMapping(value = "/userManage/person/downFile")public void downFile(Integer photoId, HttpServletResponse response) {OutputStream outputStream = null;InputStream in = null;try {PhotoModel photoModel = sysPersonService.getPhotoById(photoId);BLOB photo = (BLOB) photoModel.getPhoto();// byte[] data=photo.getBytes();
String fileName = photoModel.getPhotoName() == null ? "照片.jpg": photoModel.getPhotoName();fileName = URLEncoder.encode(fileName, "UTF-8");response.reset();response.setHeader("Content-Disposition", "attachment; filename=\""+ fileName + "\"");response.addHeader("Content-Length", "" + photo.length());response.setContentType("application/octet-stream;charset=UTF-8");in = new BufferedInputStream(photo.getBinaryStream());outputStream = new BufferedOutputStream(response.getOutputStream());int len = 0;byte[] buf = new byte[1024];while ((len = in.read(buf, 0, 1024)) != -1) {outputStream.write(buf, 0, len);}} catch (ApplicationException e) {// TODO Auto-generated catch block
            e.printStackTrace();} catch (IOException e) {// TODO Auto-generated catch block
            e.printStackTrace();} catch (Exception e) {// TODO Auto-generated catch block
            e.printStackTrace();} finally {try {in.close();outputStream.flush();outputStream.close();} catch (IOException e) {// TODO Auto-generated catch block
                e.printStackTrace();}}}

转载于:https://www.cnblogs.com/sdjnzqr/p/4328817.html

EXTjs+SpringMVC+Mybatis实现照片的上传，下载，查看关键技术整理相关推荐

java实现excel文件上传_java相关：SpringMVC下实现Excel文件上传下载
java相关:SpringMVC下实现Excel文件上传下载发布于 2020-6-21| 复制链接摘记: 在实际应用中,经常会遇到上传Excel或者下载Excel的情况,比如导入数据.下载统计数据 ...
SpringMVC之CRUD和文件上传下载
目录一.CRUD(增删改查) 1.导入pom依赖 2.框架配置文件 3.web.xml 4.工具类(分页) 4.增删改查二.图片上传 1.步骤 2.导pom依赖 3.springmvc-servl ...
maven 项目 springMVC实现文件图片的上传下载功能详解（源码已提供，小白必看）
文件上传是项目开发中最常见的功能之一 ,springMVC 可以很好的支持文件上传,但是SpringMVC上下文中默认没有装配MultipartResolver,因此默认情况下其不能处理文件上传工作. ...
企业微信如何使用文件盘上传下载查看文件？
方法/步骤昨天在我们的手机里面找到企业微信,点击打开. 接着在企业微信中点击进入工作台. 在工作台中找到文件盘,点击进入. 接着我们点击进入文件夹. 在文件夹中我们可以看到资料和文档,点击文档后面的 ...
SAP 员工照片批量上传下载
涉及表 TOAHR HR管理级的容器表 *根据员工号判断文件是否存在 CALL FUNCTION 'HR_IMAGE_EXISTS'EXPORTINGp_pernr = L_PERNRP_TCLAS ...
extjs插件开发上传下载文件简单案例
前台,extjs,框架,mybatis,spring,springMVC,简单的文件上传下载案例. 必要的jar包,commons-fileupload-1.3.1.jar,commons-io-2. ...
SpringMVC整合fastdfs-client-java实现web文件上传下载
为什么80%的码农都做不了架构师?>>> 版权声明:本文为博主原创文章,转载请标明出处(http://blog.csdn.net/wlwlwlwl015)Thanks. 目录( ...
在Linux系统（服务器）使用阿里云盘服务快速上传下载文件
使用集群服务器的时候,尤其是当服务器有多个节点时有些复杂,连接集群我们一般用xshell,传输文件我们一般使用Xftp,一般对于单个节点服务器来说是方便的,使用Xftp还可以可视化本地和服务器端的文件 ...
SpringMVC数据校验、文件上传
SpringMVC数据校验.文件上传首先在此鸣谢所有本篇博客涉及技术给予我指导的导师,朋友! 目录: 1.文件上传流程: 2.数据校验: 3.本试验遇到的报错问题及解决办法: 4.Java文件源代码 ...
SpringMVC——文件上传下载，异步请求和SSM整合
一,SpringMVC文件上传下载 1.1 同步 1.1.1 文件上传第一步:定义上传表单 <form action="${pageContext.request.contextPa ...

EXTjs+SpringMVC+Mybatis实现照片的上传，下载，查看关键技术整理

EXTjs+SpringMVC+Mybatis实现照片的上传，下载，查看关键技术整理相关推荐

最新文章

热门文章