我有以下代码:
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
在循环内部声明以避免冲突,但我想知道是否有更优雅的解决方案?