如何阻止Javascript Foliotek'；s在同一页面上使用最新上载的图像覆盖以前剪切和上载的图像时进行剪切

场景是，我正在上传并在一个页面上裁剪多达4幅图像。一旦图像被裁剪，它就会出现在页面上。然而，当我上传并裁剪第二幅图像时，第二幅图像会在屏幕上出现两次；基本上覆盖了我上传的第一张图片

在下面的Javascript部分中，如果我发出一个

警报（'is repeating'），我成功地解决了这个问题在那里，它将触发我上传和剪切图像的次数。因此，如果我在第二轮上传图像，该警报将在裁剪阶段触发两次。如果我在第三次上传和裁剪图像，警报将触发3次，以此类推

理想的结果是，当我上传并裁剪第一幅图像时，它将显示在ID为的image元素下

id="profile-pic-1"

然后，当我上传并裁剪第二个图像时，它将显示在ID为的image元素下

id="profile-pic-2"

等等等等

如果有人能提供一个令人惊讶的解决方案。在过去的几天里，我一直在绞尽脑汁，疯狂地在谷歌上搜索一个解决方案，但运气不好

 $('#crop-img-btn').click(function() {


      $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
      }).then(function(resp) {

        $('#Pic' + imageSelector + 'Url').val(resp);
        $('#profile-pic-' + imageSelector).attr("src", resp);

        $('#crop-modal').modal('hide');

        $uploadCrop.croppie('destroy');

      });
    })

[下面是HTML和Javascript文档]


var Demo=（函数（）{
函数demoUpload（图像选择器）{
var$上传作物；
函数读取文件（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（“#裁剪模式”）.model（'show'）；
$（“#图像编辑器”）.addClass（'ready'）；
$UPLOADCROPE.CROPIE（'bind'）{
url:e.target.result
}).然后（函数（）{
log（'jQuery bind complete'）；
});
}
reader.readAsDataURL（input.files[0]）；
}否则{
//swal（“对不起，您的浏览器不支持FileReader API”）；
}
}
$uploadCrop=$（“#图像编辑器”）.CROPIE({
enableExif:true，
showZoomer:false，
视口：{
宽度：262，
身高：211，
类型：“方形”
},
边界：{
宽度：272，
身高：221
}
});
$（“#上传图片”+图像选择器）.on（'change'，function（））{
读取文件（本文件）；
});
//$（'#upload-pic2'）。on（'change'，function（）{readFile（this）；}）；
$（“#裁剪img btn”）。单击（函数（）{
$uploadCrop.CROPIE（'result'{
键入：“画布”，
大小：“视口”
}).然后（功能（resp）{
$（'Pic'+图像选择器+'Url'）.val（resp）；
$（“#profile pic-”+imageSelector）.attr（“src”，resp）；
$（“#裁剪模式”）.model（'hide'）；
$uploadCrop.cropie（'destroy'）；
});
})
}
函数init（图像选择器）{
//在初始页面加载时要做的事情
//$（“.profile pic”）.attr（“src”，“/assets/images/blank.png”）；
//这可确保上传的图像在页面重新加载时重新呈现
//$（'#Pic'+imageSelector+'Url'）.attr（“value”，$（'#profile Pic-'+imageSelector）.attr（“src”）；
demoUpload（图像选择器）；
}
返回{
init:init
};
})();

情态标题
&时代；
接近
收成
var$imageSelector；
//完成以确定上载的图像，以便croppie可以将图像输出到正确的div
$（'input[type=“file”]”）。单击（函数（）{
开关（$（this.attr（'id'））{
案例“upload-pic1”：
$imageSelector=1；
init（$imageSelector）；
打破
案例“upload-pic2”：
$imageSelector=2；
init（$imageSelector）；
打破
案例“upload-pic3”：
$imageSelector=3；
init（$imageSelector）；
打破
案例“upload-pic4”：
$imageSelector=4；
init（$imageSelector）；
打破
违约：
$imageSelector=0；
init（$imageSelector）；
}
});
您还需要解决这个问题吗？嗨，我需要！请帮忙：）@Chanticleer你为什么要问？分享就是关心。