1.上传文件到后台
<form>
<div class="filebox">
<input type="file" id="upload" name="bean.file" class="file" οnchange="validFile();"/>
</div>
<label for="upload" id="uploadError" class="error"></lable>
</form>
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的方式)
<img id="myImg" src="data:image/" οnerrοr="imgLoadError()" />
input class="hidden" type="text" id="imageSuffix" name="bean.imageSuffix" />
<input class="hidden" type="text" id="imageBase64" name="bean.imageBase64" />
$(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