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

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

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

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

Подготовка 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 .

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

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

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

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

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