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实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
js创建对象的方法汇总
Jan 07 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 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常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
php构造函数的继承方法
2015/02/09 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
jQuery中的$.ajax()方法应用
2014/05/06 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
jQuery代码优化方法总结
2018/01/29 jQuery
微信小程序switch组件使用详解
2018/01/31 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
PyQt5组件读取参数的实例
2019/06/25 Python
Django之模板层的实现代码
2019/09/09 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
用Python实现职工信息管理系统
2020/12/30 Python
输入N,打印N*N矩阵
2012/02/20 面试题
促销活动计划书
2014/05/02 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
个人简历求职信范文
2015/03/20 职场文书
幼儿园小班班务总结
2015/08/03 职场文书