使用文件讀取器和blob顯示圖像

我想用javascript的fileReader API顯示一組縮略圖圖像，它會將請求發送到我的服務器，它將用一串字節進行響應。我通過本機xhr方法發送請求。但它沒有顯示任何圖像。使用文件讀取器和blob顯示圖像

<!DOCTYPE HTML> 
<html> 
    <head> 
     <script type="text/javascript" src="/js/jquery-2.1.1.js"></script> 
     <script> 
      var thumbURL = ['https://domainname.com/api/th/1','https://domainname.com/api/th/2','https://domainname.com/api/th/3','https://domainname.com/api/th/4','https://domainname.com/api/th/5','https://domainname.com/api/th/6']; 
      (function(){ 
      for(var i=0;i<thumbURL.length;i++){ 
       var oReq = new XMLHttpRequest(); 
       oReq.open("GET", thumbURL[i]); 
       oReq.responseType = "blob"; 
       oReq.onload = function(oEvent) { 

        if (this.status == 200) { 

        var fileReader = new window.FileReader(); 
        fileReader.readAsDataURL(this.response); 
        var response=fileReader.result; 
    $("#thumbnails").append("<img src="+response+"></div>"); 
        } 
       }; 


       oReq.send(); 
      } 

      })(); 

     </script> 
    </head> 
    <body> 

     <div id="thumbnails"></div> 

    </body> 
</html>

任何幫助將不勝感激。提前感謝。

UPDATE：正確的解決方案

<html> 
    <head> 
    <script type="text/javascript" src="/js/jquery-2.1.1.js"></script> 
    <script> 
    var thumbURL = ['https://domainname.com/api/th/1','https://domainname.com/api/th/2','https://domainname.com/api/th/3','https://domainname.com/api/th/4','https://domainname.com/api/th/5','https://domainname.com/api/th/6']; 

    (function(){ 
    for(var i=0;i<thumbURL.length;i++){ 
    var oReq = new XMLHttpRequest(); 
    oReq.open("GET", thumbURL[i]); 
    oReq.responseType = "blob"; 
    oReq.onload = function(oEvent) { 
    if (this.status == 200) { 
    var filereader=new window.FileReader(); 
    filereader.readAsDataURL(this.response); 
    filereader.addEventListener("load",function() { 
    var response=filereader.result; 
    $("#thumbnails").append("<img src="+response+"></div>"); 
    },false); 
    } 
    }; 
    oReq.onerror=function(e){ 
    alert("error"); 
    }; 

    oReq.send(); 
    } 


    })(); 
    </script> 
    </head> 
    <body> 
    <div id="thumbnails"></div> 

    </body> 
    </html>

來源

2017-03-18 bharathwaj ravi

你檢查是否生成的''元素包含格式正確的[數據URI（http://stackoverflow.com/questions/1207190 /嵌入-的base64圖像）？ – Dragomok

'readAsDataURL'是一個異步操作。結果不會馬上準備好，您需要訂閱'load'事件。請參閱此處的示例：[MDN]（https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL） – Leandro

的的FileReader API是異步的，所以你必須添加一個負載處理程序，並觸發時，再加入結果：

var fileReader = new window.FileReader(); 
fileReader.onload = function() { // need load handler 
    var response=this.result; 
    $("#thumbnails").append("<img src="+response+"></div>"); 
}; 
fileReader.readAsDataURL(this.response);

我會在任何案例建議跳過轉換部分。直接使用blob不僅可以節省內存，而且速度更快。你只需要手動創建圖像元素，例如：

oReq.onload = function(oEvent) { 
    if (this.status === 200) { 
    var img = new Image; 
    img.src = (URL || webkitURL).createObjectURL(this.response); 
    $("#thumbnails").append(img); // todo: append the </div> separately 
    } 
};

來源

2017-03-18 17:28:10 K3N

oReq.onload = function（oEvent）{ if（this.status == = 200）{ fileReader.addEventListener（「的onload」，函數（）{ VAR blobresponse = fileReader.result; $（「＃縮略圖」）附加（「」）; \t \t \t \t }，真） ; \t } }; fileReader.readAsDataURL（this.response）; –

我這樣使用，但它給了我一個錯誤消息，如「Uncaught TypeError：無法在'FileReader'上執行'readAsDataURL'：參數1不是'Blob'類型。 –

@bharathwajravi你仍然使用XMLHttpRequest（）來獲取一個類型的blob的權利？嘗試console.log響應來查看返回的數據是什麼。 – K3N

使用文件讀取器和blob顯示圖像

回答

相關問題