Question

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

当文件输入发生任何变化时的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)之后/之前使用reader.readAsDataURL(file);时，名称不同（预期的是什么）但是如果我打印e.target.result，则会对代码造成延迟，使预览图像不同（应该是什么，但没有这种延迟，它就不会发生。）

Answer 1

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

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

1 个答案: