您的位置:首页 > 其它

将流或者二进制的文件或图片直接在前台展示出来

2019-06-03 15:26 363 查看

公司的这一次开发中遇到一个问题,就是服务器上不能存储文件或者图片,因为服务器的会清理掉和其他集群不同的地方,所以得到的文件流或图片流就没有了存放的地方,因此要展示的文件或图片该怎么展示呢?一开始蒙圈,之后到处查询资料,百度终于弄好了
我这一次的需求是要展示图片,所以我就说图片的了!话不多说,代码奉上,我们是银行项目,所以用的struts2,但是都是大同小异。
后台action关键代码(相当于controller)

//获得图片的二进制流(已经进行base64编码的)
String potoString = jObject1.getString("photo");
//将String类型的流放入对象返回前台
jsonRoot.put("Code", potoString);
return SUCCESS;

前台html页面关键代码

//准备显示的img标签
<img id="bigimg" src="" />

前台js关键代码

//静态页面ajax访问后台
$.post('/online/enter/showPoto.do',{
phoneNum:phoneNum,
apply_serial_no:applySerialNo,
id_type:index
},function(data){
var src = data.Code;//将后台传回的二进制数据取出
$(“#bigimg”).attr("src", "data:image/png;base64,"+src);//设置#bigimg元素的src属性
}
)

data:image/png;base64,这是Data URI scheme。
Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到浏览器的地址栏中并转到,就能看到它了,在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法, 逗号后面就是这个image/png文件base64编码后的数据。
目前,Data URI scheme支持的类型有:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐