How to download blob files using jQuery's ajax-JS Tutorial-php.cn

How to download blob files using jQuery's ajax

不言

Release： 2018-07-02 17:08:59

Original

4972 people have browsed it

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>

Copy after login

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!