上传多个正在调整大小的文件，仅显示一个预览

Question

在不使用任何额外插件的情况下，我使用 drag_n_drop 和预览功能为多个文件上传图像。此外，我将在我的项目中为它创建一个自定义元素。我可以完成所有必需的功能，但是当我尝试上传两个大小几乎相同（1.4xMB 和 1.8xMB）的文件时，它只显示最后一个选择的文件。如果我尝试使用巨大的差异，它会起作用。

Jquery 当文件输入发生任何变化时。

$(document).on('change', '.upload-resizable input[type="file"]', function () {
    var file;
    var $parent = $(this).closest('.upload-resizable');
    for (var i = 0; i < this.files.length; i++) {
        if (file = this.files[i]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = new Image();
                img.onload = function () {
                    var ratio = Math.min(800 / this.width, 600 / this.height);
                    var width = this.width * ratio;
                    var height = this.height * ratio;

                    var canvas = document.createElement("canvas");
                    canvas.width = width;
                    canvas.height = height;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, width, height);

                    var dataUrl = canvas.toDataURL();

                    var cell = $parent.find('.upload-cell.stay-in.hidden').clone();
                    cell.removeClass('hidden').removeClass('stay-in');
                    cell.find('img.upload-preview').attr('src', dataUrl);
                    $parent.find('.upload-box').append(cell);

                    var hidden = $parent.find('input[type="hidden"]');
                    if (hidden.val() != "") dataUrl = hidden.val() + "|" + dataUrl;
                    hidden.val(dataUrl);
                };
                img.src = e.target.result;
            }
            reader.readAsDataURL(file);
        }
    }
});

我需要 new Image 部分，用于调整大小。当我使用 console.log(file.name) after/before reader.readAsDataURL(file); 时，名称不同（这是预期的）但是如果我打印 e.target.result 它会延迟代码，使预览图像成为差异（应该是什么，但没有这个延迟，它不会发生）。

Answer 1

在 reader.onload 中将 img.src = e.target.result; 更改为 img.src = this.result; 完成了工作！

上传多个正在调整大小的文件，仅显示一个预览

Upload multiple file being resized showing only one preview

jquery

resize

file-upload

image

filereader