最近遇到一个场景,就是做一个验证码,后台返回一张验证码,而且这个请求中带有唯一的id标识,前端发送验证的时候这个id需要伴随着code一起发送到后端。日常显示图片都直接使用img的src属性,就可以显示出图片,但是不能获取到id,所以就利用Ajax进行get请求获取图片得二进制流,然后渲染进Img标签然后append到dom中。
原生得Ajax请求
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();
jQuery的Ajax请求
因为jQuery的Ajax没有Blob数据类型的请求,所以在Github上有一个大牛封装了jQuery数据类型扩展插件,所以我们直接就拿来用
github地址:https://github.com/tachengshimengH/jquery-ajax-blob-arraybuffer
<script src="jquery-ajax-blob-arraybuffer.js"></script>
JS代码:
$.ajax({ type: "GET", headers: { Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8' }, dataType: 'blob', url: "https://api.lbtc.io/genvercode", success: function (data, status, res) { var reader = new window.FileReader(); reader.readAsDataURL(data); reader.onloadend = function () { $("#code").attr('src', reader.result); $("#code").attr('data-uid', res.getResponseHeader('Content-Type').split(",")[1]); }; } })
HTML:
<img id="code" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAYCAIAAACDYM+5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABISURBVFhH7dAxAQAwEAOh+rcVY7Xwt4ME3jiTFcgKZAWyAlmBrEBWICuQFcgKZAWyAlmBrEBWICuQFcgKZAWyAlmBrEDW2fYB7cJtnPXgYPQAAAAASUVORK5CYII=" alt="Verification code" >
img我引了一个灰色的占位图。
还没有评论,来说两句吧...