Filereader API在第一次更改后没有更新文件

Filereader API not updating file after first change

本文关键字：更新 文件 API 第一次 Filereader      更新时间：2023-09-26

我已经有了下面的代码来改变与cropper.js使用的文件选择图像。这工作伟大的第一次我选择的文件，但当我试图改变文件的img不更新。每次我更改文件时，onchange不应该是fire吗?

        document.getElementById("avatar").onchange = function () {
            var reader = new FileReader();
            reader.onload = function (e) {
                // get loaded data and render thumbnail.
                document.getElementById("image").src = e.target.result;
                $('#image').cropper({
                    aspectRatio: 1,
                    preview: ".img-preview",
                    crop: function(e) {
                        // Output the result data for cropping image.
                        $('#x').val(e.x);
                        $('#y').val(e.y);
                        $('#w').val(e.width);
                        $('#h').val(e.height);
                    }
                });
            };
            // read the image file as a data URL.
            reader.readAsDataURL(this.files[0]);
        };

UPDATE:显然，文件阅读器api正在更新，因为我期望没有裁剪器的功能。我可以在哪里放置crop .js引导程序，以便它也随着img的源更改而更新?

在onchange之后直接添加这个效果很好。

if($('#image').cropper("active")) {
    $('#image').cropper("destroy");
}
相关文章：