Код?... Это просто!
php js Jquery JsPhp blog
ТЕГИ:
js (87)
input (4)

php (101)
js (87)
php date (19)
html (14)
online (14)
js slice (13)
encode (11)
js array (11)
php array (10)
js date (10)
engine (10)
hash (10)
dosite (9)
info (7)
php img (7)
jsphp (6)
Показать еще :

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

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

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

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

    Результат:

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

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

    Опять же... чтобы новый 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 со словами "Перетащите сюда файл" прямо здесь:

  3. Обрабатываем перетаскивание файла в поле 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.

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

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

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

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

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

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


Теги:перетащите файл в input перетащите файлы сюда перетащите файлы для загрузки перетащите файлы или выберите на компьютере перетащите файлы в эту область для загрузки файлов перетащите их сюда перетащите файлы сюда или загрузите вручную перетащить или загрузить вручную файл нажмите или перетащите сюда файл перетащите файл сюда или выберите вручную как сделать стилизовать input file для перетаскивания пример подсказок о перетаскивании файла перетащите файлы сюда или загрузите вручную как сделать
jsphp.ru есть здесь:
Полезные ссылки:
ruweb
Я писал немного о ruweb.net!
Помочь проекту JsPhp.ru

Что можно сделать!?

Поделиться ссылкой! C друзьями или врагами!


Помочь проекту JSPHP.RU: Помочь проекту JSPHP.RU прокомментировать :

Скоро...


Мои Проекты :

Скоро...



О хостинге :

Скоро...


© jsphp.ru 2023 - 2024 , Аминев Марат. Контакты
Страница загружена за : 0.006639 секунд.