使用jQuery的ajax方法将图像检索为blob [英] Using jQuery's ajax method to retrieve images as a blob

问题描述

我最近问过另一个（相关的）问题，这导致了这个后续问题：
提交数据而不是输入表单的文件

I recently asked another (related) question, which lead to this follow up question: Submitting data instead of a file for an input form

通过jQuery.ajax（）文档读取（ http://api.jquery.com/jQuery.ajax/ ），似乎是接受的数据类型列表不包含图像。

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

我正在尝试使用jQuery.get（或jQuery.ajax，如果必须）检索图像，存储此Blob中的图像，并在POST请求中将其上载到另一台服务器。目前，看起来由于数据类型不匹配，我的图像最终被破坏（大小以字节不匹配等）。

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.).

执行此操作的代码如下如下（它在coffeescript中但不应该难以解析）：

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检索？

How can I retrieve this image as a blob instead?

推荐答案

您不能使用jQuery ajax，但使用原生XMLHttpRequest。

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();      

---

编辑

所以重新审视这个话题，似乎确实可以用jQuery 3做到这一点

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

或

使用xhrFields设置responseType

use xhrFields to set the responseType

    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的ajax方法将图像检索为blob的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！