search

Home  >  Article  >  Web Front-end  >  How to download blob files using jQuery's ajax

How to download blob files using jQuery's ajax

不言
不言Original
2018-07-02 17:08:594966browse

This article mainly introduces the relevant information about jQuery's ajax downloading blob files. It is very good and has reference value. Friends who need it can refer to it.

It sounds a bit confusing at first. I used ng and react before. I also wrote a similar function when I was working on it, but it went very smoothly (so I forgot the specific details). Why doesn't jquery work? After looking at the specific scenario, I found that the ajax callback of jq had parsed the response data in a string format in a fool-proof manner.

After checking gg, I found that the domestic solution is not to use jq in this scenario, but to manually create XMLHttpRequest yourself. Although this method is very reliable, the previously encapsulated jq ajax cannot be used.

After checking jq’s documentation, I planned to expand the data type myself based on the jQuery.ajaxSetup() interface provided by jq, but I couldn’t figure it out. Later, I found a jq plug-in packaged by Daniel on github.

Then we can write like this: 

<!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>

However, judging from the source code of the plug-in, it also manually builds an XMLHttpRequest Object to send ajax, but compatibility may be an issue. If you want to learn more, you can read here.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Native JS writing Ajax request function function

Introduction to the use of ajaxFileUpload asynchronous file upload

The above is the detailed content of How to download blob files using jQuery's ajax. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Introduction to the get and post methods based on js native and ajax as well as the native writing method of jsonpNext article：Introduction to the get and post methods based on js native and ajax as well as the native writing method of jsonp

Related articles

See more