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

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

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

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

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

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

Нам потребуется простой <input type=file>.

Выведем прямо здесь(непонятно... куда перетаскивать файл...):

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

Html:

<input type=file class="step_1">

Css:

<style>

.step_1{

cursor: pointer;

display: block;

width: 100%;

padding: 10px 0;

text-indent: 10px;

background: none;

border: 1px solid #ccc;

border-radius: 3px;

font-family: inherit;

font-size: 1rem;

color: #444;

margin: 5px 0;

height: 150px;

position: relative;

}

</style>

Результат:

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

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

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

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

Свойство " content "

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

Html:

<input type=file class="step_2">

Css:

<style>

.step_2{

cursor: pointer;

display: block;

width: 100%;

padding: 10px 0;

text-indent: 10px;

background: none;

border-radius: 3px;

font-family: inherit;

font-size: 1rem;

color: #444;

margin: 5px 0;

height: 150px;

position: relative;

}

input[type="file"].step_2::before {

display: inline-block;

content: 'Перетащите сюда файл!';

position: absolute;

margin: 70px 0;

width: 100%;

text-align: center;

left: 0px;

}

</style>

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

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

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

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

Добавим два div чтобы передавать... и просто увидеть... что происходит у нас над полем:

<div id=to_on></div>

<div id=todrop></div>

Добавим пару функций:

ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"

При каждом из событий будем добавлять соответствующий класс с новым содержанием в "content" с соответствующими свойствами!

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

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

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

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

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

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

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

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

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

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

Событие над.
Событие отпустить.