Для фильтрации файлов при использовании функциональности drag and drop в элементе input type file вам понадобится сочетание событий dragenter, dragover и drop, а также дополнительные проверки на типы файлов.
Вот пример кода на JavaScript, который реализует фильтрацию файлов при использовании drag and drop:
// Получаем элементы var inputElement = document.getElementById("file-input"); var dropZone = document.getElementById("drop-zone"); // Предотвращаем перенаправление при событиях dragover и drop dropZone.addEventListener("dragover", function(e) { e.preventDefault(); }); dropZone.addEventListener("drop", function(e) { e.preventDefault(); // Получаем список файлов var files = e.dataTransfer.files; // Фильтруем файлы по типу var filteredFiles = Array.from(files).filter(function(file) { return file.type === "image/png" || file.type === "image/jpeg"; }); // Выводим отфильтрованные файлы for (var i = 0; i < filteredFiles.length; i++) { console.log(filteredFiles[i].name); } // Отправляем отфильтрованные файлы в input inputElement.files = filteredFiles; });
В этом примере у нас есть два элемента: input с идентификатором "file-input" и область перетаскивания с идентификатором "drop-zone". Мы прослушиваем события dragover и drop на области перетаскивания, предотвращая переадресацию по умолчанию для обоих событий.
Внутри обработчика события drop мы получаем список файлов, перетащенных в область. Затем мы фильтруем список файлов, оставляя только файлы с типом "image/png" или "image/jpeg". Для фильтрации файлов мы используем метод filter() для массива объектов File.
Затем мы выводим имена отфильтрованных файлов в консоль и передаем их в качестве значений для свойства files элемента input. Это позволяет отображать файлы в элементе input, как если бы пользователь выбрал их через обычное окно выбора файлов.
Важно отметить, что фильтрация типов файлов, указанная в примере (только png и jpeg), может быть изменена на любые другие типы файлов в соответствии с вашими потребностями.
Надеюсь, этот пример поможет вам реализовать фильтрацию файлов при использовании drag and drop в элементе input type file.