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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
控制打印时页眉角的代码
Feb 08 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
Vue动态面包屑功能的实现方法
Jul 01 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独立Session数据库存储操作类分享
2014/06/11 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
python生成日历实例解析
2014/08/21 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
爱的奉献演讲稿
2014/09/10 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
阿凡达观后感
2015/06/10 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers
python如何查找列表中元素的位置
2022/05/30 Python