js (vanilla) - 在元素 1 上放置图像并处理默认文件上传器中的放置

Question

我正在尝试将图像拖放到图像框上 - 但使用我已经为典型文件上传器创建的拖放事件（防止代码重复）。
我有以下 HTML:

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

以及以下 JS:

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

Btn.addEventListener("drop",Go);

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

注释
“FileUpl”最初是由一个函数生成的，该函数附加了对丢弃文件的特殊处理。因此：我宁愿不将我的代码复制到 Btn 中的运行，而是在那里触发 ondrop 事件。然而：似乎没有任何东西在呼唤...

放置事件传递给 FileUpl.ondrop，但不知何故未被处理。如果我直接放在 FileUpl 控件上（如果它是独立的），那么它会毫无问题地处理放置的文件。

我的问题：触发我在控件 FileUpl... 中的处理程序的正确方法是什么？我正在使用 Vanilla JS（无库）

Answer 1

您需要阻止 dragenter、dragexit 和 dragover 事件的默认操作，之后您可以像这样使用 drop 事件处理保管箱：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    
    <style>
        .drop-section {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .drop-section > * {
            border: 1px solid #eee;
            min-width: 450px;
            min-height: 450px;
            padding: 30px;
            line-height: 450px;
            text-align: center;
        }
    </style>
</head>
<body>
    <section class="drop-section">
        <div class="drop-section__area">
            Drop your image here!
        </div>
    </section>
    
    <script>
        let dropArea = document.querySelector(".drop-section__area");

        // preventDefault and stopPropagation with some style
        function dragHandler(e) {
            e.preventDefault();
            e.stopPropagation();
            dropArea.style.background = "#f9f9f9";
            dropArea.style.opacity = ".5";
        };

        dropArea.addEventListener("dragenter", dragHandler);
        dropArea.addEventListener("dragexit", dragHandler);
        dropArea.addEventListener("dragover", dragHandler);

        // handle the drop event
        function drop(e) {
            e.stopPropagation();
            e.preventDefault();
            dropArea.style.background = "unset";
            dropArea.style.opacity = "1";
            var [file] = e.dataTransfer.files;
            console.log(file.name);
        };

        dropArea.addEventListener("drop", drop);
    </script>
</body>
</html>

阅读 here

中关于 DataTransfer 的更多信息

js (vanilla) - 在元素 1 上放置图像并处理默认文件上传器中的放置

js (vanilla) - drop image on element 1 and handle the drop in default file uploader

javascript

drag-and-drop