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获取方法
Sep 21 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
小程序实现留言板
Nov 02 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
详解uniapp的全局变量实现方式
Jan 11 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原创论坛
2006/10/09 PHP
php checkbox 取值详细说明
2010/08/19 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
php依赖注入知识点详解
2019/09/23 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
js模块加载方式浅析
2017/08/12 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
Python使用MONGODB入门实例
2015/05/11 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
pandas数据处理之绘图的实现
2020/06/15 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
生日寿宴答谢词
2014/01/19 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python