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 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
用JS动态改变表单form里的action值属性的两种方法
May 25 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
npm的lock机制解析
Jun 20 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 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
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
浅谈javascript实现八大排序
2015/04/27 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python中对list去重的多种方法
2014/09/18 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
centos7之Python3.74安装教程
2019/08/15 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
运动会入场词60字
2014/02/15 职场文书
地质灾害防治方案
2014/05/14 职场文书
三八节标语
2014/06/27 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
公司的力量观后感
2015/06/05 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
angular4实现带搜索的下拉框
2022/03/25 Javascript