使用 jQuery 的 ajax 方法将图像作为 blob 检索

2022-01-30 00:00:00 jquery javascript

我最近问了另一个(相关)问题，这导致了这个后续问题:为输入表单提交数据而不是文件

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

相关文章