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 相关文章推荐
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
vue+node 实现视频在线播放的实例代码
Oct 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
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
js 操作符实例代码
2009/10/24 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
django模板语法学习之include示例详解
2017/12/17 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
技术总监的工作职责
2013/11/13 职场文书
1亿有多大教学反思
2014/05/01 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
处级干部考察材料
2014/12/24 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
培训班开班主持词
2015/07/02 职场文书
运动会1000米加油稿
2015/07/21 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技