在上一个问题中，您尝试在 POST 请求中提交图像数据。您当前的方法涉及使用 jQuery.ajax 检索图像，但由于数据类型不匹配，您遇到了损坏的图像。
有限的 jQuery 数据类型
jQuery.ajax支持多种数据类型，但不明确包含图像。因此，单独使用 jQuery 将图像作为 blob 访问是不可行的。
原生 XMLHttpRequest 解决方案
要解决此问题，您可以使用原生 XMLHttpRequest。下面是一个示例：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var img = document.getElementById('img');
var url = window.URL || window.webkitURL;
img.src = url.createObjectURL(this.response);
}
}
xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send();此脚本将创建一个 XMLHttpRequest 对象，将其配置为接收 Blob 响应，并使用 Blob URL 属性在 HTML 元素中显示图像。
jQuery 3 解决方案
在 jQuery 3 中，提供了一种新方法：
jQuery.ajax({
url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
cache:false,
xhr:function(){// Seems like the only way to get access to the xhr object
var xhr = new XMLHttpRequest();
xhr.responseType= 'blob'
return xhr;
},
success: function(data){
var img = document.getElementById('img');
var url = window.URL || window.webkitURL;
img.src = url.createObjectURL(data);
},
error:function(){
}
});在此示例中，xhr 函数用于配置 XMLHttpRequest 对象，并且响应类型显式设置为“blob”。这允许 jQuery 以 blob 形式检索图像并将其显示在图像元素中。
以上是如何使用 jQuery 和 JavaScript 以 Blob 形式检索图像？的详细内容。更多信息请关注PHP中文网其他相关文章！
