ajax请求二进制流图片并渲染到html中img标签
日常显示图片都诸如这种形式:直接使用img的src属性
<img src="图片路径、地址" alt="" />
以上方法无法在获取图片请求中设置请求头(headers)中字段
方法二:
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","http://10.10.0.62:10001/api/charge/admin/v1/image/code",true);
xmlhttp.responseType = "blob";
xmlhttp.onload = function(){
console.log(this);
if (this.status == 200) {
var blob = this.response;
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
document.body.appendChild(img);
}
}
xmlhttp.send();
Accept:浏览器能够显示的字符集。
Accept-Charset:浏览器能够显示的字符集。
Accept-Encoding:浏览器能够处理的压缩编码。
Accept-Language:浏览器当前设置的语言。
Connection: 浏览器与服务器之间的连接类型。
Cookie:当前页面设置的任何cookie
Host:发出请求的页面所在域。
Referer:发出请求的页面的URL.(该单词正确拼法是referrer)
User-Agent:浏览器的用户代理字符串。
jquery优化版:
function imgFun (url, auth, img) {
var windowUrl = window.URL || window.webkitURL;//处理浏览器兼容性
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.setRequestHeader("Authorization", 'Bearer ' + auth.token);
xhr.onload = function () {
console.log(this);
if (this.status == 200) {
var blob = this.response;
$(img).load(function (e) {
windowUrl.revokeObjectURL(img.src);
}).attr("src", windowUrl.createObjectURL(blob));
}
}
xhr.send();
} imgFun("/common/download/rgPhoto/" + d.result, auth, $("#rgPhotoImg");
参考:
ajax请求二进制流图片并渲染到html中img标签的更多相关文章
- ajax 请求二进制流 图片
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> ...
- Ajax请求二进制流并在页面展示
后端代码: public void getIntegralQrcode(HttpServletResponse response, String token) throws BizException, ...
- AJAX请求 $.ajaxSetup方法的使用:设置AJAX请求的默认参数选项,当程序中需要发起多个AJAX请求时,则不用再为每一个请求配置请求的参数
定义和用法ajaxSetup() 方法为将来的 AJAX 请求设置默认值.语法$.ajaxSetup({name:value, name:value, ... }) 该参数为带有一个或多个名称/值对的 ...
- ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践
写在前面 :从提出需求到完美的解决问题,实现过程是曲折的. 需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,webclient需要请求 Service 返 ...
- 第六章 MVC之 FileResult和JS请求二进制流文件
一.FileResult 1.简介 表示一个用于将二进制文件内容发送到响应的基类.它有三个子类: FileContentResultFilePathResultFileStreamResult 推荐阅 ...
- ajax 请求 后台返回的文件流
download(url) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); // 也可以使用POST方式,根据接口 xhr. ...
- Bootstrap_Datatable Ajax请求两次问题的解决
最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...
- ajax请求参数为中文乱码的情况
解决中文乱码问题的方法有很多. 一.前提是ajax请求传递参数对象到后台,对象中的某个参数的值为中文,到后台之后出现乱码,导致报错.问题解决如下: rest层: 二.在tomcat的server.xm ...
- JQuery Datatable Ajax请求两次问题的解决
最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...
随机推荐
- C#支付宝多次回调问题
//必须删除掉页面上的默认内容,不然支付宝会多次回调 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&q ...
- React生命周期执行顺序详解
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...
- 关于spring boot启动监控端点的方法(spring-boot-starter-actuator)
前言: 在spring boot的旧版本中,监控端点(如/env)是默认开启的,所以只要项目正常启动,就能通过url获取信息.可是在2.0版本以后,由于安全性考虑,除了/health和/info的端点 ...
- netstat 在windows下和Linux下查看网络连接和端口占用
假设忽然起个服务,告诉我8080端口被占用了,OK,我要去看一下是什么服务正在占用着,能不能杀 先假设我是在Windows下: 第一列: Proto 协议 第二列: 本地地址[ip+端口] 第三列:远 ...
- hibernate的三种状态和缓存
hibernate的三种状态: 1.瞬时态:对象里面没有id值,对象与session没有关联 类似,把class类new出来,不存进session 2.持久态:对象里面有id值,对象与session关 ...
- C# txt文件的读取与写入
C#创建记事本方法一://创建对象 FileStream stream = new FileStream(@"d:\aa.txt",FileMode.Create);//fileM ...
- PHP的session的实现机制
一.默认机制,用磁盘文件来实现PHP会话.php.ini配置:session.save_handler = files 1.session_start() A. session_start()是ses ...
- 《剑指offer》第六十题(n个骰子的点数)
// 面试题60:n个骰子的点数 // 题目:把n个骰子扔在地上,所有骰子朝上一面的点数之和为s.输入n,打印出s // 的所有可能的值出现的概率. #include <iostream> ...
- mint 安装过程
这几天因为各种原因装系统(自己因为双屏不能旋转,输入法界面始终矬,重装2次(应该都是更新内核和更新时包依赖不对的锅,以后屏蔽内核更新和linux-libc-dev这样的更新,要么就新版本出来重装),和 ...
- qt.network.ssl: QSslSocket: cannot call unresolved function SSLv23_client_method
使用Qt编写程序访问知乎官网,程序报错 qt.network.ssl: QSslSocket: cannot call unresolved function SSLv23_client_method ...