保存图片信息到数据库,并可读取后显示在前端

1.上传文件到后台


2.读取二进制流,保存到数据库中(这里我在数据库创建的字段是mediumtext类型,也可以是blob或其他blob,若是blob,则将byte[]存入数据库)

InputStream in = null;
try {
  if (bean.getFile() != null) {
     in = new FileInputStream(bean.getFile());
     byte[] b = new byte[(int)bean.getFile().length()];
     in.read(b);
     bean.setImageBase64(new BASE64Encoder().encode(b));
     manager.save(bean);
  } catch() {

  } finally {

  }

3.读取图片

3.1 拼接src(若图片都比较小且无需兼容IE6.IE7,可以采用拼接src的方式)


input class="hidden" type="text" id="imageSuffix" name="bean.imageSuffix" />

 
  
$(function() {
  $("#myImg").attr("src",$("#myImg").attr("src") + $("#imageSuffix").val() + ";base64," + $("#imageBase64").val() );

})
function imgLoadError() {
  $("#myImg").attr("alt","图片未上传或已被删除");
}
3.2向后台请求

$(function() {
  $("#myImg").attr("src",url);
})
Bean bean = manager.getImageByParams(params);
String imgBase64 = bean.getImageBase64();
String imgSuffix = bean.getImageSuffix();
if (StringUtils.isNotEmpty(imgBase64) && StringUtils.isNotEmpty(imgSuffix)) {
  response.setContentType("image/"+imgSuffix);
  response.setHeader("Pragma","no-cache");
  response.setIntHeader("Expired",-1);
  response.getOutputStream().write(new Base64Decoder().decodeBuffer(imgBase64));
}


几点记录:

1.出于安全考虑,IE浏览器必须双击上传,才弹出本地文件路径,可通过css修改

2.IE8以下的浏览器不支持Base64显示图片,IE8对这种方式显示图片有大小限制



参考:

http://www.cnblogs.com/xudong-bupt/p/3758529.html

http://hw1287789687.iteye.com/blog/1971297

http://www.jb51.net/article/48717.htm

你可能感兴趣的:(java,数据库,图片,前端)