使用jQuery的Ajax方法作为BLOB检索图像

Question

使用jQuery的Ajax方法作为BLOB检索图像

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

阅读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

这里是一个简洁的函数，它将数据转换为base 64字符串。在处理二进制文件(pdf、PNG、jpeg、docx、.)时，这可能会很方便。获得二进制文件的WebView中的文件，但您需要将文件的数据安全地传输到应用程序中。// 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 returnsfunction 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 2

如果你需要处理错误消息使用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”是“或”text“(曾经是”BLOB“)时，才能访问该值。