Блог

Главная - Вопросы по программированию - js (ванильный) — поместите изображение на элемент 1 и обработайте удаление в загрузчике файлов по умолчанию

js (ванильный) — поместите изображение на элемент 1 и обработайте удаление в загрузчике файлов по умолчанию

#javascript #drag-and-drop

#javascript #перетаскивание

Вопрос:

Я пытаюсь поместить изображение в поле изображения, но используя событие drop, которое я уже создал для обычного загрузчика файлов (предотвращение дублирования кода).
У меня есть следующий 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. Однако: кажется, ничего не вызывается…

Событие drop передается в FileUpl.ondrop, но почему-то не обрабатывается. В то время как, если бы я попал непосредственно в элемент управления FileUpl (если бы он был автономным), тогда он обработал бы файл при удалении без каких-либо проблем.

Мой вопрос: как правильно запустить обработчик, который у меня есть в управляющем FileUpl …? Я использую Vanilla JS (без библиотеки)

Ответ №1:

Вам необходимо запретить действие по умолчанию для dragenter , dragexit , и dragover событий, после этого вы можете обрабатывать dropbox с 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>

Подробнее об DataTransfer этом здесь