Javascript js（香草）-将图像放到元素1上，并处理默认文件上传器中的拖放

我正试图在图像框中放置图像，但使用了我为典型文件上载程序创建的放置事件（防止代码重复）。
我有以下HTML：

<div id="Btn" class="btn2">
    <input id="FileUpl" type="file" style="display:none;">
    <img class="fill">
</div>

注释
“FileUpl”最初是由一个函数生成的，该函数附加了对丢弃文件的特殊处理。 因此：我不希望在Btn中复制我的代码，而是在那里触发ondrop事件。 然而：似乎什么都没有被召唤

drop事件传递到FileUpl.ondrop，但不知何故没有被处理。 如果我直接在FileUpl控件上拖放（如果它是独立的），那么它将在拖放时处理文件而不会出现任何问题。

我的问题：触发控制文件upl中的处理程序的正确方法是什么。。。？

---

我正在使用Vanilla JS（无库）

您需要防止

dragenter

、

dragexit

和

dragover

事件的默认操作，然后您可以使用

drop

事件处理dropbox，如下所示：

试验
.下降段{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.删除部分>*{
边框：1px实心#eee；
最小宽度：450px；
最小高度：450px；
填充：30px；
线高：450px；
文本对齐：居中；
}
把你的照片放在这里！
让dropArea=document.querySelector（“.drop-section\uuu区域”）；
//使用某种样式防止默认和停止播放
函数dragHandler（e）{
e、 预防默认值（）；
e、 停止传播（）；
dropArea.style.background=“#f9f9f9”；
dropArea.style.opacity=“.5”；
};
dropArea.addEventListener（“dragenter”，dragHandler）；
dropArea.addEventListener（“dragexit”，dragHandler）；
dropArea.addEventListener（“dragover”，dragHandler）；
//处理丢弃事件
功能下降（e）{
e、 停止传播（）；
e、 预防默认值（）；
dropArea.style.background=“unset”；
dropArea.style.opacity=“1”；
var[file]=e.dataTransfer.files；
console.log（文件名）；
};
dropArea.addEventListener（“drop”，drop）；

let Btn=document.getElementById("Btn");
let FileUpl=document.getElementById("FileUpl"); 

Btn.addEventListener("drop",Go);

function Go(e) { FileUpl.ondrop(e); } // SEE NOTES BELOW