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获取复选框被选中值的简单方法
Jul 04 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
js实现的在本地预览图片功能示例
Nov 09 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
详解Vue数据驱动原理
Nov 17 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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巧获服务器端信息
2006/12/06 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
可输入的下拉框
2006/06/19 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
js 对象是否存在判断
2009/07/15 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python条件和循环的使用方法
2013/11/01 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
物业管理毕业生的自我评价
2014/02/17 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
代办社保委托书范文
2014/10/06 职场文书
颐和园导游词400字
2015/01/30 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS