Javascript 使用文件读取器和blob显示图像_Javascript_Blob_Filereader

Javascript 使用文件读取器和blob显示图像

javascript

Javascript 使用文件读取器和blob显示图像,javascript,blob,filereader,Javascript,Blob,Filereader,我希望使用javascript的fileReader api显示一组缩略图。我将向我的服务器发送请求，它将以字节流响应。我通过本机xhr方法发送请求。但它不显示任何图像 <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="/js/jquery-2.1.1.js"></script> <script>

我希望使用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>


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'];
（功能（）{
对于（var i=0；i，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);

var fileReader=newwindow.fileReader（）；
fileReader.onload=函数（）{//需要加载处理程序
var响应=此结果；
$（“#缩略图”）。附加（“”）；
};
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
  }
};

oReq.onload=函数（oEvent）{
如果（this.status==200）{
var img=新图像；
img.src=（URL | | webkitURL）.createObjectURL（this.response）；
$（“#缩略图”）.append（img）；//todo:分别附加
}
};
您是否检查了生成的
元素是否包含格式正确的？readAsDataURL
是一个异步操作。结果不会马上准备好，您需要订阅load事件。请参见这里的示例：oReq.onload=function（oEvent）{if（this.status==200）{fileReader.addEventListener（“onload”，function（）{var blobrensponse=fileReader.result；$（“#缩略图”）.append（“”；}，true）；}}；fileReader.readAsDataURL（this.response）；我像这样使用，但它给我一条错误消息，如“未捕获的TypeError:未能在“FileReader”上执行“readAsDataURL”：参数1不是类型“Blob”。@bharathwajravi您仍在使用XMLHttpRequest（）要正确获取类型blob？请尝试console.log响应以查看返回的数据。数据URL是否安全？我甚至可以在匿名模式下访问它。是否有任何方法使其在类似于blob URL的其他选项卡中不工作？
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
  }
};