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 validate使用攻略 第四步
Jul 01 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
javascript定义函数的方法
Dec 06 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
详解js的视频和音频采集
Aug 09 Javascript
微信小程序签到功能
Oct 31 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 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远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
Python学习入门之区块链详解
2017/07/25 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
python virtualenv虚拟环境配置与使用教程详解
2020/07/13 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
学生自我鉴定范文
2013/10/04 职场文书
校领导推荐信
2013/11/01 职场文书
检查接待方案
2014/02/27 职场文书
正科级干部考察材料
2014/05/29 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
区域经理岗位职责
2015/02/02 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
病危通知单
2015/04/17 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
Python利用zhdate模块实现农历日期处理
2022/03/31 Python