javascript - 使用 readAsDataURL() 进行图像预览

Question

jsFiddle 网址:http://jsfiddle.net/Xotic750/AjtLx

整天都在处理这个问题，但我看不到问题所在。这可能是由于我对 FileReader 对象如何工作的狭隘理解，但我想做的是使用 readAsDataURL() 来获取用户选择的图像并在表格的屏幕上预览它们。一切正常减去......你猜对了......预览......好吧。我想我已经接近了，因为预览会起作用，但它只显示集合的最后一张图像。举例来说，如果我上传了 6 张图片，那么第一行的 3 张图片将被破坏，第二行的前 2 张将被破坏，然后最后的第 6 张图片将显示预览....非常感谢任何建议。此外，一旦这可行，它可能会帮助其他人尝试做同样的事情，因为我已经到处寻找解决这个问题的方法，但我似乎无法挖掘任何东西....

function PreviewImages() {
    var inputID = document.getElementById('input_clone');
    var totalImages = inputID.files.length;
    var imagesPerRow = 3;
    var numRows = totalImages / imagesPerRow;
    var row = "";
    var cell = "";
    var element1 = "";
    var elementID = "";


    for(var i = 0; i < numRows; i++){ //create rows
        row = document.getElementById('image_preview_table').insertRow(i);
        for(var ii = 0; ii < imagesPerRow; ii++){ //create cells
            cell = row.insertCell(ii);
            elementID = "img_" + ii;
            element1 = document.createElement("img");
            element1.name = elementID;
            element1.id = elementID
            cell.appendChild(element1);

            oFReader = new FileReader();

            oFReader.onload = function(oFREvent){
                var dataURI = oFREvent.target.result;
                var image = document.getElementById(elementID);
                image.src = dataURI;
            };

                oFReader.readAsDataURL(document.getElementById("input_clone").files[ii]);

    }
}
}

Answer 1

您的代码的问题是:readAsDataURL() 是异步的，您应该等到它完成读取，然后再调用第二次读取或通过调用 new FileReader() 创建一个新实例。

Xotic750 的答案有效，因为他为每个图像创建了一个 FileReader，而您只使用了一个 FileReader。

但是，使用 FileReader 预览图像并不是一个好的选择，因为 FileReader.readAsDataURL() 会将整个图像转换为一个大字符串(格式为 "data:image/jpeg;base64,/9j/4SVaRXhpZgAAS.. ...")，并且通过将整个图像数据字符串放入 img.src 属性来显示图像，如果图像很大，则可能会出现内存不足的风险。

img.src 旨在包含图像的 url，而不是图像的数据，尽管您可以通过 img.src = "data:image/jpeg;.... ..”.

因此，您应该使用 window.URL.createObjectURL() 创建一个引用本地镜像的 url，并将此 url 分配给 img.src:

...
img.src = window.URL.createObjectURL(fileInput.files[i]);
...