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 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
Vue分页组件实例代码
Apr 17 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
vscode中Vue别名路径提示的实现
Jul 31 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
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
python移位运算的实现
2019/07/15 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
店长岗位的工作内容
2013/11/12 职场文书
运动会广播稿50字
2014/01/26 职场文书
春节联欢会主持词
2014/03/24 职场文书
大型营销活动计划书
2014/04/28 职场文书
学生逃课检讨书
2015/02/17 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技