Question

我最近问了另一个（相关的）问题，这导致了这个后续问题： Submitting data instead of a file for an input form

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

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

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

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？

Answer 1

你无法使用jQuery ajax，但使用原生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
来做到这一点

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

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

Answer 2

非常感谢@Musa，这是一个将数据转换为base64字符串的简洁函数。在处理获取二进制文件的WebView中处理二进制文件（pdf，png，jpeg，docx，...）文件但您需要将文件数据安全地传输到应用程序中时，这可能会对您有用。

// runs a get/post on url with post variables, where:
// url ... your url
// post ... {'key1':'value1', 'key2':'value2', ...}
//          set to null if you need a GET instead of POST req
// done ... function(t) called when request returns
function getFile(url, post, done)
{
   var postEnc, method;
   if (post == null)
   {
      postEnc = '';
      method = 'GET';
   }
   else
   {
      method = 'POST';
      postEnc = new FormData();
      for(var i in post)
         postEnc.append(i, post[i]);
   }
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200)
      {
         var res = this.response;
         var reader = new window.FileReader();
         reader.readAsDataURL(res); 
         reader.onloadend = function() { done(reader.result.split('base64,')[1]); }
      }
   }
   xhr.open(method, url);
   xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
   xhr.send('fname=Henry&lname=Ford');
   xhr.responseType = 'blob';
   xhr.send(postEnc);
}

Answer 3

如果您需要使用 jQuery.AJAX 处理错误消息，则需要修改xhr函数，因此responseType不是发生错误时被修改。

因此，只有在成功调用后，才需要将responseType修改为“ blob”：

$.ajax({
    ...
    xhr: function() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 2) {
                if(xhr.status == 200) {
                    xhr.responseType = "blob";
                } else {
                    xhr.responseType = "text";
                }
            }
        };
        return xhr;
    },
    ...
    error: function(xhr, textStatus, errorThrown) {
        console.error(xhr.responseText); //Here you are able now to access to the property responseText as you have the type set to text instead of blob.
    },
    success: function(data) {
        console.log(data); //Here is blob type
    }
});

注意：如果您在将xhr.responseType设置为“ blob”之后调试并在该位置放置断点，则可以注意到，如果尝试获取“ responseText”的值，则会收到以下消息：

仅当对象的“ responseType”为“”或“文本”（为“ blob”）时，才可以访问该值。

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

3 个答案: