为什么不能使用 jQuery.ajax 将图像作为 blob 检索？-js教程-PHP中文网

为什么不能使用 jQuery.ajax 将图像作为 blob 检索？

Mary-Kate Olsen

发布： 2024-11-13 03:58:01

原创

929 人浏览过

Why can't you use jQuery.ajax to retrieve images as blobs?

使用 XMLHttpRequest 以 Blob 形式检索图像

您正在尝试使用 jQuery.get 检索图像，将其存储在 Blob 中，然后将其上传到另一台服务器。但是，数据类型不匹配导致图像损坏。

为什么不能使用 jQuery ajax 将图像作为 blob 检索？

jQuery.ajax不支持以 Blob 形式检索图像。

解决方案

要以 Blob 形式检索图像，您需要使用原生 XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 &amp;&amp; this.status == 200){
        //this.response is what you're looking for
        handler(this.response);
        console.log(this.response, typeof this.response);
        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();

登录后复制

jQuery 3 更新

从 jQuery 3 开始，可以使用 jQuery.ajax 将图像作为 blob 检索：

jQuery.ajax({
        url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&amp;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(){
            
        }
    });

登录后复制

以上是为什么不能使用 jQuery.ajax 将图像作为 blob 检索？的详细内容。更多信息请关注PHP中文网其他相关文章！