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 相关文章推荐
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 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 模拟$_PUT实现代码
2010/03/15 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
简单实现js浮动框
2016/12/13 Javascript
javascript常用的设计模式
2017/02/09 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
用js编写留言板
2020/03/17 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
分享几道你可能遇到的python面试题
2017/07/24 Python
Python温度转换实例分析
2018/01/17 Python
Python装饰器语法糖
2019/01/02 Python
python操作redis数据库的三种方法
2020/09/10 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
某同学的自我鉴定范文
2013/12/26 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
防溺水主题班会教案
2015/08/12 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
九年级历史教学反思
2016/02/19 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js