1、數據庫建表語句:其中紅色部分爲存儲圖片的字段;
CREATE TABLE `show_picture` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主鍵',
`type` varchar(20) DEFAULT NULL COMMENT '類型,作品:WORK ;客片:GUEST',
`title` varchar(20) DEFAULT NULL COMMENT '標題',
`description` varchar(200) DEFAULT NULL COMMENT '描述',
`style_type` int(11) DEFAULT NULL COMMENT '對應風格分類',
`place_type` int(11) DEFAULT NULL COMMENT '對應場景分類',
`enjoy_type` int(11) DEFAULT NULL COMMENT '對應欣賞分類',
`picture` longblob COMMENT '對應圖片',
`for_first_pic` longblob COMMENT '對應首頁圖片(只對服務報價推薦到首頁有效)',
`for_related_pic` longblob COMMENT '對應相關作品詳細頁面圖片',
`create_time` datetime DEFAULT NULL COMMENT '創建時間',
`sort` int(11) DEFAULT '0' COMMENT '排序',
`var_temp` varchar(20) DEFAULT NULL COMMENT '字符型備用字段',
`int_temp` int(11) DEFAULT NULL COMMENT '數字型備用字段',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
2、自動生成實體類
public class ShowPicture {
private Integer id;
private String type;
private String title;
private String description;
private Integer styleType;
private Integer placeType;
private Integer enjoyType;
private Date createTime;
private Integer sort;
private String varTemp;
private Integer intTemp;
}
這是基本字段,具體存儲圖片的爲blog類型,自動生成代碼時,blog類型的字段會自動生成子類繼承基本類
public class ShowPictureWithBLOBs extends ShowPicture {
private byte[] picture;
private byte[] forFirstPic;
private byte[] forRelatedPic;
}
set、get方法自己完善;
3、因爲前臺傳到controller中的附件要以MultipartFile類型,所以設置一個同樣繼承基本類的子類,和ShowPictureWithBLOBs字段一樣,字段類型爲MultipartFile,具體如下:
public class ShowPictureWithBLOBsUseMultipartFile extends ShowPicture {
private MultipartFile pictureFile;
private MultipartFile forFirstPicFile;
private MultipartFile forRelatedPicFile;
}
4、前臺圖片上傳控件
<div id = "uploadFile2">
<div class="form-group mno file">
<label for="forFirstPicFile" class="col-sm-1 control-label" style="text-align:left;width:100px;">對應首頁圖片</label>
<div class="col-sm-3" style="margin-top:7px;">
<input id="forFirstPicFile" name="forFirstPicFile" type="file">
</div>
</div>
</div>
其中,要注意的是form表單類型要multipart類型,如下
<form id="myform1" action="$!{appRoot}/showpic/$!{method}.do" enctype="multipart/form-data" class="form-horizontal" role="form" method="post">
5、controller層接收並處理數據,
@RequestMapping(value="/create.do",method=RequestMethod.POST)
public String showpic_create_post(Model model,
ShowPictureWithBLOBsUseMultipartFile showPic) throws IOException{
logger.info("showpic_create_post start");
model.addAttribute("zhStr", ShowPictureType.valueOf(showPic.getType()));
//將相應文件(圖片)取得inputStream
InputStream isPictureFile = showPic.getPictureFile().getInputStream();
InputStream isForFirstPictureFile = showPic.getForFirstPicFile().getInputStream();
InputStream isForRelatedPictureFile = showPic.getForRelatedPicFile().getInputStream();
byte[] pictureData = new byte[(int) showPic.getPictureFile().getSize()];
byte[] forFirstPictureData = new byte[(int) showPic.getForFirstPicFile().getSize()];
byte[] forRelatedPictureData = new byte[(int) showPic.getForRelatedPicFile().getSize()];
isPictureFile.read(pictureData);
isForFirstPictureFile.read(forFirstPictureData);
isForRelatedPictureFile.read(forRelatedPictureData);
/**
* 將ShowPictureWithBLOBsUseMultipartFile類型的實體轉換成能夠存入到數據庫中的ShowPictureWithBLOBs類型
*/
ShowPictureWithBLOBs spwb = new ShowPictureWithBLOBs();
spwb.setCreateTime(showPic.getCreateTime());
spwb.setEnjoyType(showPic.getEnjoyType());
spwb.setForFirstPic(forFirstPictureData);
spwb.setForRelatedPic(forRelatedPictureData);
spwb.setId(showPic.getId());
spwb.setIntTemp(showPic.getIntTemp());
spwb.setPicture(pictureData);
spwb.setPlaceType(showPic.getPlaceType());
spwb.setSort(showPic.getSort());
spwb.setStyleType(showPic.getStyleType());
spwb.setTitle(showPic.getTitle());
spwb.setType(showPic.getType());
spwb.setVarTemp(showPic.getVarTemp());
showPicBiz.createNewShowPic(spwb);
logger.info("showpic_create_post end");
return "redirect:/showpic/list.do?type="+spwb.getType();
}
到此,已經能把數據存入到數據庫中。
6、將圖片取出並顯示到頁面。後臺處理
@RequestMapping(value="/getPhoto.do",method=RequestMethod.GET)
public void getPhotoById (int id, int width, int height, final HttpServletResponse response) throws IOException{
ShowPictureWithBLOBs entity = this.showPicBiz.findShowPicById(id);
byte[] data = entity.getPicture();
if (width != 0 && height != 0) {
data = scaleImage(data, width, height);
}
response.setContentType("image/jpeg");
response.setCharacterEncoding("UTF-8");
OutputStream outputSream = response.getOutputStream();
InputStream in = new ByteArrayInputStream(data);
int len = 0;
byte[] buf = new byte[1024];
while ((len = in.read(buf, 0, 1024)) != -1) {
outputSream.write(buf, 0, len);
}
outputSream.close();
}
/**
* 顯示縮微圖
* TODO
* @param data
* @param width
* @param height
* @return
* @throws IOException<br/>
* ============History===========<br/>
* 2014年11月27日 Administrator 新建
*/
public static byte[] scaleImage(byte[] data, int width, int height) throws IOException {
BufferedImage buffered_oldImage = ImageIO.read(new ByteArrayInputStream(data));
int imageOldWidth = buffered_oldImage.getWidth();
int imageOldHeight = buffered_oldImage.getHeight();
double scale_x = (double) width / imageOldWidth;
double scale_y = (double) height / imageOldHeight;
double scale_xy = Math.min(scale_x, scale_y);
int imageNewWidth = (int) (imageOldWidth * scale_xy);
int imageNewHeight = (int) (imageOldHeight * scale_xy);
BufferedImage buffered_newImage = new BufferedImage(imageNewWidth, imageNewHeight, BufferedImage.TYPE_INT_RGB);
buffered_newImage.getGraphics().drawImage(buffered_oldImage.getScaledInstance(imageNewWidth, imageNewHeight, BufferedImage.SCALE_SMOOTH), 0, 0, null);
buffered_newImage.getGraphics().dispose();
ByteArrayOutputStream outPutStream = new ByteArrayOutputStream();
ImageIO.write(buffered_newImage, "jpeg", outPutStream);
return outPutStream.toByteArray();
}
7、前臺顯示
<img src="$!{appRoot}/showpic/getPhoto.do?id=$!showpic.id&width=150&height=150"/>