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插入节点appendChild insertBefore使用方法
Jul 04 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
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
1 Tube Radio
2021/03/02 无线电
php上传、管理照片示例
2006/10/09 PHP
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
python生成特定分布数的实例
2019/12/05 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
python爬取音频下载的示例代码
2020/10/19 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
北京华建集团SQL面试题
2014/06/03 面试题
运动会广播稿50字
2014/01/26 职场文书
《在家里》教后反思
2014/03/01 职场文书
2014年计生标语
2014/06/23 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
个人委托函范文
2015/01/29 职场文书
大学生英文求职信范文
2015/03/19 职场文书
项目备案申请报告
2015/05/15 职场文书
观后感的写法
2015/06/19 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers