Question

我有以下代码：

oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function (oFREvent) {
    $("#preview").append("<img src='" + oFREvent.target.result + "' />");
};

function loadImageFile() {
    if (document.getElementById("uploadImage").files.length === 0) { return; }

    $.each(document.getElementById("uploadImage").files, function (index, value) {
        if (!rFilter.test(value.type)) { alert("You must select a valid image file!"); return; }
        oFReader.readAsDataURL(value);
    });
}

打算将已拖动的图像集合拖到类型文件的输入上，然后在div中预览这些图像。我的问题是，当我运行它时，只显示最后一个图像。如果我在我的javascript中添加一个断点并逐步执行代码，则会显示两个图像。

我假设发生了这种情况，因为oFReader.onload被快速调用了两次。我曾考虑使用setTimeout或可能在我的循环中声明oFReader以试图避免冲突，但我想知道是否有更优雅的解决方案？

Answer 1

您正在阅读的每个文件都需要一个单独的FileReader对象。

.readDataAsURL()是一种异步方法。在你打电话之后，它会在一段时间后结束。在.each()循环中，您尝试在上一个文件完成之前读取新文件，从而在完成之前将其停止。

你可以这样做：

function loadImageFile() {
    if (document.getElementById("uploadImage").files.length === 0) { return; }

    $.each(document.getElementById("uploadImage").files, function (index, value) {
        var oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

        if (!rFilter.test(value.type)) { alert("You must select a valid image file!"); return; }
        oFReader.onload = function (oFREvent) {
            $("#preview").append("<img src='" + oFREvent.target.result + "' />");
        };
        oFReader.readAsDataURL(value);
    });
}

在javascript中读取文件太快了？

1 个答案: