jQuery的ajax下载blob文件


Posted in Javascript onJuly 21, 2016

乍一听有点蒙,之前用ng和react时也写过类似的功能,但是很顺利(所以忘记具体细节了)。jquery为啥会不行呢?看了一下具体场景,发现原来jq的ajax回调已经把response的数据傻瓜式的以字符串的方式解析了。

查了一下gg,发现国内的解决方案就是在该场景下不实用jq,而是自己手动创建XMLHttpRequest。虽然这个方法很可靠,但之前封装的jq的ajax就不能使用了。

查了查jq的文档,本打算自己根据jq提供的jQuery.ajaxSetup()接口来拓展数据类型,但怎么都搞不定。后来,在github上找到了一个大牛封装好的jq插件。

然后我们就可以这么写了:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>blob demo</title>
</head>
<body>
<img id="img" src="" />
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js" charset="utf-8"></script>
<script src="jquery-ajax-blob-arraybuffer.js"></script>
<script type="text/javascript">
$.ajax({
url: "./face.jpg",
type: "get",
dataType: "blob", //扩展出了blob类型
}).done(function(data, status, jqXHR){
var reader = new window.FileReader();
reader.readAsDataURL(data);
reader.onloadend = function() {
document.getElementById("img").src=reader.result;
}
}).fail(function(jqXHR, textStatus) {
console.warn(textStatus);
});
</script>
</body>
</html>

不过,从该插件的源码上来看,它也是手动构建了一个XMLHttpRequest对象来发送ajax,不过兼容性可能会成为问题。想深究的可以看这里。

以上所述是小编给大家介绍的jQuery的ajax下载blob文件 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js去除重复字符串两种实现方法
Jan 09 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
AngularJS语法详解
Jan 23 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 #Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 #Javascript
jQuery新窗口打开外链接
Jul 21 #Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 #Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 #Javascript
Node.js如何自动审核团队的代码
Jul 20 #Javascript
js只执行1次的函数示例
Jul 20 #Javascript
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP几个实用自定义函数小结
2016/01/25 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
javascript操作css属性
2013/12/30 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
Angular实现响应式表单
2017/08/04 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
详解Python中的静态方法与类成员方法
2017/02/28 Python
名片管理系统python版
2018/01/11 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
微信公众号token验证失败解决方案
2019/07/22 Python
python十进制转二进制的详解
2020/02/07 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
群众路线表态发言材料
2014/10/17 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python