已解決430363個問題，去搜搜看，總會有你想問的

使用jQuery的Ajax方法作為BLOB檢索圖像

首頁猿問使用jQuery的Ajax方法作為...

使用jQuery的Ajax方法作為BLOB檢索圖像

JavaScript JQuery

慕尼黑5688855 2019-07-04 16:37:52

使用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檢索？

查看完整描述

3 回答

皈依舞

TA貢獻1851條經驗獲得超3個贊

這里是一個簡潔的函數，它將數據轉換為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);}

反對回復 2019-07-04

互換的青春

TA貢獻1797條經驗獲得超6個贊

如果你需要處理錯誤消息使用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“)時，才能訪問該值。

反對回復 2019-07-04

3 回答
0 關注
2936 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用jQuery的Ajax方法作為BLOB檢索圖像

使用jQuery的Ajax方法作為BLOB檢索圖像

3 回答

添加回答