Перетаскиваем файл в input.

"Перетаскиваем файл в input". Отслеживаем перемещение файла в поле input. С оповещением, что файл отпущен над полем "input". Стилизация поля input file для перетаскивания.

Перетаскиваем файл в input.

1. Подготовка input к перетаскиванию.
2. Добавляем надпись "Перетащите сюда файл"
3. Обрабатываем перетаскивание файла в поле input.
4. Как стилизовать input file для перетаскивания.
5. Пример перетаскивания файла в поле input..
Код можно скачать здесь.
6. Новое - Пример перетаскивания файла в поле input №2..
Код можно скачать здесь

Подготовка input к перетаскиванию.

Для того, чтобы "перетащить файл в input" - его надо подготовить:

Нам потребуется тег input с типом file:

<input type=file>

Если я сейчас выведу данное поле загрузки файла, то вы получите стандартное поле, которое непонятно, куда перетаскивать файл...

Поле надо стилизовать, чтобы увеличить поле input и было видно куда уже можно перетащить файл...:

Html:

<input type=file class=example>

Css:

Добавлю стили... , поскольку стилей стало больше, чем обычно... они все в архиве...

javascript - еще не добавлен...

Смотрим результат:



Добавляем надпись "Перетащите сюда файл"

Для того, чтобы добавить надпись "Перетащите сюда файл" вам потребуется:

Опять же... чтобы новый input отличался добавим новый класс - step_2.

Нам потребуется поставить before


Свойство "content"

Позиционируем - "position: absolute;" и т.д...

Html:

<input type=file class="step_2">

Css:

Некоторые стили для понимания... остальные в архиве...

<style>

input[type="file"].text_add_img::before { content: 'Перетащите сюда файл!'; }

input[type="file"].drop_it::before { content: 'Отпускай! Ловлю!'; }

input[type="file"].drop_it { background: #a7a7a7; color: aliceblue; }

input[type="file"].catch::before { content: 'Я поймал!'; }

</style>

Результат добавления "Перетащите сюда файл"

Разместим готовый код input со словами "Перетащите сюда файл" прямо здесь:




Обрабатываем перетаскивание файла в поле input.

Далее... нам осталось всего-то написать js скрипт, чтобы отловить движение, бросок файла, покидание поля...

Добавим пару функций, которые и будут отслеживать перетаскивание в input :

dragleave.

dragover.

drop.

Скачать готовый скрипт "Перетащите сюда файл"

Весь код можно скачать здесь.

Как стилизовать input file для перетаскивания.

Для того, чтобы стилизовать "input file для перетаскивания" вам потребуется всего лишь скачать готовый код здесь со стилями и скриптом, который будет отлавливать загруженный файл, пример смотри ниже:

И смотри еще стилизация input file .

Пример скрипта "Перетащите сюда файл"

Разместим выше рассказанный код прямо здесь:

Зажмите любой файл на компьютере и перетащите в приведенное поле!

Делайте это медленно, чтобы увидеть изменения!

Потом отпускайте файл!

Новое - Пример перетаскивания файла в поле input №2.

11.01.2025

Прошло какое-то время... я использовал данный код уже несколько раз... и уже немного его модифицировал...

Что нового в коде перетаскивания файла в поле input №2.

Отдельный "новый" пример по "перетаскиванию файла в поле input" здесь делать не буду, поскольку... я сейчас чищу весь сайт... и кругом столько кода, который повторяется в нескольких местах...

Поэтому живой пример, который уже один раз написан.

Только одно поле ввода "input" - выделено красным бордюром... смотри здесь.

В архиве... бордюр(конечно же) стандартного серого цвета(#ccc)...

Итак... что нового в коде перетаскивания файла в поле input №2.

Всё тоже самое, что и в предыдущем архиве... добавлено:

Убрал файл не выбран.

Убрал надпись "выберите файл".

+ Стили немного изменил... ничего кардинального, ну... просто оптимизация...

При перетаскивании выйдет надпись:

Я поймал!

При нажатии на поле как на кнопку...:

Файл загружен!

Где скачать новый пример перетаскивания файла в поле input №2.

Скачиваем здесь Обращаю ваше внимание!

Я не пользуюсь браузером "Firefox" и никогда бы не стал пользоваться... но для тестирования я вынужден...

И оказалось, что этот браузер не поддерживает ":before" в одинарных тегах... "input" как раз к ним относится!

И особенно париться из-за этого бы не стал... и в данный момент не знаю, как реагировать на эту новость...

Популярность этого браузера очень низкая... всего 2%... поэтому... ээээ...мммм...

Короче.. я не знаю... нужно ли делать отдельный скрипт, чтобы он еще и для "Firefox" работал!