将流或者二进制的文件或图片直接在前台展示出来
公司的这一次开发中遇到一个问题,就是服务器上不能存储文件或者图片,因为服务器的会清理掉和其他集群不同的地方,所以得到的文件流或图片流就没有了存放的地方,因此要展示的文件或图片该怎么展示呢?一开始蒙圈,之后到处查询资料,百度终于弄好了
我这一次的需求是要展示图片,所以我就说图片的了!话不多说,代码奉上,我们是银行项目,所以用的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浏览器都支持这种小文件嵌入。
- JavaWeb实现图片异步上传,在前台展示,并以二进制保存到数据库
- 利用certutil.exe实现在批处理(bat)中嵌入可执行文件或者各种媒体、图片之类二进制文件的简单方法!
- nginx 配置后网站图片或js 加载出来一半或者不出来刷新才可以,chrome 浏览器访问项目时加载大文件失败 ERR_CONTENT_LENGTH_MISMATCH:
- 如何读取某个指定文件夹下所有文件,并筛选出其中的图片文件(jpeg,bmp)展示出来。
- 图片或文件上传到服务器或从服务器上读取(图片可根据路径src回显展示,从服务器上读出来)
- asp.net FileUpload 控件上传文件 以二进制的形式存入数据库并将图片显示出来
- Spring4 MVC 多文件上传(图片并展示)
- java实现解析二进制文件的方法(字符串、图片)
- java实现解析二进制文件(字符串、图片)
- android通知扫描某个文件或者文件夹(图库及时更新图片)
- java开发,前台用EXTJS展示,后台 swfuplaod批量图片上传组件的运用
- 如何基于扩展名来禁止或者限制samba共享出来的文件?
- 文件编码【文本】【二进制】【图片】【音频】
- 关于图片或者文件在数据库的存储方式归纳
- asp 点击直接下载文件和图片-示例
- iOS使用AFNetworking上传图片或者文件
- java代码实现从网上直接下载图片或者网页
- 关于图片或者文件在数据库的存储方式归纳
- 圆形图片自定义控件CircleImageView,支持布局文件中直接使用(附源码)
- 关于有时在安卓布局文件中EditText出现文字显示不出来或者光标不显示的问题的解决方案