项目用的是 struts2+spring+hibernate+ibatis的框架
一、图片从页面到后台的保存
1、页面相关代码
前台页面用的是extjs4实现的,上传的是图片格式
{name:'imgFile1',columnWidth:0.666,xtype:'filefield',buttonText:'浏览',regex:/^(.+)(.gif|.GIF|.png|.PNG|.jpg|.JPG)$/,
regexText:'文件类型错误,只能上传gif,png,jpg格式的图片',
listeners:{
change:function(thiz){
var name = thiz.getValue().substring(thiz.getValue().lastIndexOf("\\")+1); //把文件名设置到对应名称的文本框上
viewport.detailForm.getForm().findField('model.imgName1').setValue(name);
}
},xtype:'hidden'
}
//然后提交是用form表单的submit方式提交的
2、hibernate中的数据类型
<property name="img1" type="byte[]">
<column name="IMG1" />
</property>
3.java模型中的定义方式
private byte[] img1;
public byte[] getImg1() {
return this.img1;
}
public void setImg1(byte[] img1) {
this.img1 = img1;
}
4.业务逻辑的编写
private File imgFile1;
if(imgFile1 != null){
model.setImg1(IOUtils.toByteArray(new FileInputStream(imgFile1))); //把图片文件转换为byte数组放入到属性中
}
service.saveOrUpdate(model); //对model进行保存
以上记载的比较简略,主要的类就是IOUtils
二、从后台取图片返回到前台页面并显示
1.java中查询图片的语句
/**
* 查询图片
* @throws IOException
*/
public String queryPhoto() throws IOException{
IBaseService service = BeanFactory.getBean("baseService");
HashMap<String,String> params = new HashMap<String,String>();
params.put("goodsId",goodsId);
List<HashMap<String,Object>> modelList = service.queryListBySql("shop.querySpGoodsBaseInfoImg",params); //此处是ibatis中的查询语句
HttpServletResponse response = ServletActionContext.getResponse();
OutputStream os = null;
InputStream is = null;
HashMap<String,Object> sbi = modelList.get(0);
try {
os = response.getOutputStream();
Blob file = (Blob) sbi.get(img);
is = file.getBinaryStream();
int count = 0;
byte[] buffer = new byte[1024 * 1024];
while ((count = is.read(buffer)) != -1)
os.write(buffer, 0, count);
} catch (Exception e) {
e.printStackTrace();
}finally {
if (os != null)
os.close();
if (is != null)
is.close();
}
return null;
}
2.ibatis中的写法
select
T.IMG1 "img1"
from SP_GOODS_BASE_INFO T
3.前台加载图片的方法
//加载图片的窗口
var chartWindow = new Ext.Window({
width:670,
height:400,
autoScroll:true,
closeAction:'hide',
layout:'fit'
})
//点击按钮,实现图片加载
var gridMeta = [
{
xtype:'actioncolumn',
text:'',
width:30,
items: [{
icon: '../themes/image/default/mult_align.gif',
tooltip: '查看图片',
align:'center',
handler: function(grid, rowIndex, colIndex) {
var record = viewport.dataJStore.getAt(rowIndex);
var goodsId = record.get("model.goodsId");
var existPhoto = false;
chartWindow.removeAll();
chartWindow.setTitle(record.get("model.name"));
if(!Ext.isEmpty(record.get("model.imgName1"))){
existPhoto = true;
chartWindow.add({
border: false,
autoScroll:false,
frame:false,
flex:1,
html: "<img src="+CONTEXT_PATH+"/shop/queryPhotoSpGoodsBaseInfo.do?goodsId="+goodsId+"&img=img1>"
});
}
if(!Ext.isEmpty(record.get("model.imgName2"))){
existPhoto = true;
chartWindow.add({
border: false,
autoScroll:false,
frame:false,
flex:1,
html: "<img src="+CONTEXT_PATH+"/shop/queryPhotoSpGoodsBaseInfo.do?goodsId="+goodsId+"&img=img2>"
});
}
if(!existPhoto){
chartWindow.add({
border: false,
autoScroll:false,
frame:false,
flex:1,
html: "无图片"
});
}
chartWindow.doLayout();
chartWindow.show();
}
}]
}]
这里指记载了主要的代码片段,可根据自己业务进行具体扩展