我最近问了另一个(相关)问题,这引出了这个后续问题:

Reading through the jQuery.ajax() documentation (http://api.jquery.com/jQuery.ajax/), it seems the list of accepted dataTypes doesn't include images.

I'm trying to retrieve an image using jQuery.get (or jQuery.ajax if I have to), store this image in a Blob and upload it to another server in a POST request. Currently, it looks like due to the mismatch in datatypes, my images end up being corrupt (size in bytes mismatch, etc.).

The code to perform this is as follows (it is in coffeescript but shouldn't be difficult to parse):

handler = (data,status) ->
  fd = new FormData
  fd.append("file", new Blob([data], { "type" : "image/png" }))
  jQuery.ajax {
    url: target_url,
    data: fd,
    processData: false,
    contentType: "multipart/form-data",
    type: "POST",
    complete: (xhr,status) ->
      console.log xhr.status
      console.log xhr.statusCode
      console.log xhr.responseText

  }
jQuery.get(image_source_url, null, handler)

我如何取而代之地将此图像检索为一个blob?

推荐答案

You can't do this with jQuery ajax, but with native XMLHttpRequest.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && 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();      

EDIT

So revisiting this topic, it seems it is indeed possible to do this with 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(){
            
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<img id="img" width=100%>

or

使用xhrFields设置响应类型

    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,
            xhrFields:{
                responseType: 'blob'
            },
            success: function(data){
                var img = document.getElementById('img');
                var url = window.URL || window.webkitURL;
                img.src = url.createObjectURL(data);
            },
            error:function(){
                
            }
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <img id="img" width=100%>

Jquery相关问答推荐

在Click事件上将焦点设置为Kendo UI网格列筛选器文本框

在文本框中的最后一个字符之后设置焦点

jQuery 1.4.1 中缺少 JSON 字符串化?

使用 jQuery click 处理锚点 onClick()

使用 jQuery 将行添加到表的 tbody

jQuery绑定到粘贴事件,如何获取粘贴的内容

lodash debounce 在匿名函数中不起作用

使用 jQuery 将宽度设置为百分比

如何清除/重置 jQuery UI Datepicker 日历上的选定日期?

测试两个元素是否相同

判断复选框是否未选中单击 - jQuery

如何使用 jQuery 在悬停时显示工具提示消息?

如何测试 URL 字符串是绝对的还是相对的?

如何在 Bootstrap 中创建切换按钮

jquery 检测某些类的 div 已添加到 DOM

如何使用 jQuery 检测 IE 8?

如何使用 bootstrap 中的 selectpicker 插件在 Select 时设置选定值

bootstrap 日期和时间 Select 器

jquery $(window).height() 正在返回文档高度

小于 10 给数字加 0