ファイルリーダーとブロブを使用して画像を表示

javascriptのfileReader APIを使用してサムネイル画像のセットを表示したいです。私のサーバーにリクエストを送信し、バイトストリームで応答します。ネイティブxhrメソッドでリクエストを送信しています。しかし、その画像は表示されません。ファイルリーダーとブロブを使用して画像を表示

<!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/embedding-base64-images）？ – 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);

私は希望を変換部分をスキップすることをお勧めします。ブロブを直接使用するとメモリを節約できるだけでなく、はるかに高速です。あなたは、たとえば、手動で画像要素を作成する必要があります。

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 ==真\t \t \t \t }、）; = 200）{ fileReader.addEventListener（ "オンロード" 機能（）{ VAR blobresponse = fileReader.result; $（ "＃サムネイル"）（ ""）を追加; \t } }; fileReader.readAsDataURL（this.response）; –

私はこのように使用しましたが、 "Uncaught TypeError： 'FileReader'で 'readAsDataURL'を実行できませんでした：パラメータ1は 'Blob'タイプではありません。 –

@bharathwajravi XMLHttpRequest（）を使用して、型のBLOBの権利を取得していますか？コンソールから返されたデータが何であるかを確認するために、console.logを実行してみてください。 – K3N

ファイルリーダーとブロブを使用して画像を表示

答えて

関連する問題