jQuery的ajax下载blob文件

更新时间：2016年07月21日 09:25:15 投稿：mrr

这篇文章主要介绍了jQuery的ajax下载blob文件的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

乍一听有点蒙，之前用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文件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

jQuery解析json格式数据简单实例
这篇文章主要介绍了jQuery解析json格式数据的方法,结合实例分析了使用jQuery1.7.2版本的方法解析json格式数据的技巧,需要的朋友可以参考下
2016-01-01
jQuery实现鼠标可拖动调整表格列宽度
这篇文章主要介绍了通过jQuery实现鼠标可拖动调整表格列宽度,需要的朋友可以参考下
2014-05-05
jQuery$命名冲突怎么办如何解决
某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行，下面有个不错的解决方法
2014-01-01
javascript中用星号表示预录入内容的实现代码
在一个WEB项目中，有一个比较特殊点的文本框客户要求实现在那个文本框录入数据前先用星号（*）表示要录入的信息（那个文本框要录入的数据位数是已知的
2011-01-01
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
这篇文章主要介绍了jQuery实现可拖拽的许愿墙效果,可实现拖拽图片与层叠显示功能,涉及jQuery插件的简单使用,并附带demo源码供读者下载参考,需要的朋友可以参考下
2016-09-09
jquery ajax请求实例深入解析
jquery中封装了一些ajax请求的方法，很实用,本文将以此引入一个实例，对jquery中ajax请求的方法进行详细介绍，需要了解更多的朋友可以参考下
2012-11-11
Jquery实现多选下拉列表左右移动
这篇文章主要为大家详细介绍了Jquery实现多选下拉列表左右移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
jQuery实现的移动端图片缩放功能组件示例
这篇文章主要介绍了jQuery实现的移动端图片缩放功能组件,结合实例形式详细分析了jQuery基于移动端的图片缩放功能组件实现原理、步骤、核心代码及使用技巧,需要的朋友可以参考下
2020-05-05
jQuery中each()方法用法实例
这篇文章主要介绍了jQuery中each()方法用法,以实例形式详细分析了each()方法的功能、定义及使用技巧,非常具有实用价值,需要的朋友可以参考下
2014-12-12
多种方法实现360浏览器下禁止自动填写用户名密码
这篇文章主要介绍了多种方法实现360浏览器下禁止自动填写用户名密码,需要的朋友可以参考下
2014-06-06