Javascript Filereader API在第一次更改后未更新文件

我有以下代码来更改文件选择中的图像，以便与crapper.js一起使用。这在我第一次选择文件时效果很好，但是当我尝试更改文件时，img不会更新。我每次更改文件时不应该再次更改火吗

        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]);
        };

---

更新：显然，filereader api正在更新，正如我在没有裁剪器的情况下所期望的那样。我可以将croper.js引导程序放在哪里，以便它也能随着img的源代码更改而更新？

在onchange之后直接添加它非常有效

if($('#image').cropper("active")) {
    $('#image').cropper("destroy");
}