Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/8: Рейтинг темы: голосов - 8, средняя оценка - 5.00
 Аватар для PinkieRAR
4 / 4 / 0
Регистрация: 17.08.2016
Сообщений: 56

Подсветить input file

28.04.2021, 20:43. Показов 1719. Ответов 2

Студворк — интернет-сервис помощи студентам
Привет, помогите, пожалуйста
У меня есть поле в которое можно из ОС кинуть файлы.
Как сделать подсветку этого поля при нахождении курсора над ним, при том, что мышь зажата и файлы всё ещё перетаскиваются пользователем?
Скорее всего мне нужно какое-то событие. Видел это на сайте с библиотекой

Видео-демонстрация нужного эффекта:
Кликните здесь для просмотра всего текста
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
28.04.2021, 20:43
Ответы с готовыми решениями:

Как подсветить input через js
<form class="form-horizontal" action="#" method="post" id="my_form"> <div class="form-group"> <label...

Получить названия файлов из input file в input text
Как переместить названия файла из input type file в input type text с помощью javascript?

input type file
Можно привести пример следующего кода. Есть форма для выбора файла, нужно чтобы пользователь нажав на кнопку (а лучше картинку) перестал...

2
Coding is art
Эксперт JS
540 / 423 / 154
Регистрация: 04.09.2013
Сообщений: 1,066
28.04.2021, 21:42
Лучший ответ Сообщение было отмечено PinkieRAR как решение

Решение

HTML5
1
2
3
4
5
6
<div
      ondragenter="this.classList.toggle('dragenter')"
      ondragleave="this.classList.toggle('dragenter')"
    >
// ...
</div>
когда перетаскиваемый элемент будет над дивом - к нему добавиться класс dragenter как файл уберётся - уберётся и класс..

или в js:

JavaScript
1
2
3
4
5
6
const $div = document.querySelector('div');
function toggleClass() {
  $div.classList.toggle('dragenter');
}
$div.ondragenter = toggleClass;
$div.ondragleave = toggleClass;
3
 Аватар для PinkieRAR
4 / 4 / 0
Регистрация: 17.08.2016
Сообщений: 56
28.04.2021, 23:03  [ТС]
Спасибо!
Ещё не лишним будет событие drop
JavaScript
1
$div.ondrop = e => $div.classList.remove('dragenter');
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
28.04.2021, 23:03
Помогаю со студенческими работами здесь

кастомизация input file
Проблема вот в чем. Под кнопкой прикрепить файл снизу должен быть выведен список добавленных файлов с возможностью удаления по 1 ...

Получение полного имени файла из input file
Всем привет! Ломаю голову уже второй день... Как получить полный путь к локальному файлу? Надо грузить данные в бд из файла Excel,...

Установить путь к файлу в input type file
Добрый день, подскажите плииз. Я знаю что &quot;официально&quot; это НИКАК не сделать, но мне для юнит-тестов надо. Причем именно на JS, а...

Input file - скрипт заменяющий стиль, поправка
Добрый день, есть код: &lt;div class=&quot;dtpfile&quot;&gt; &lt;span class=&quot;formWD3&quot; style=&quot;display: none;&quot;&gt;Добавьте фото постановления...

Как записать значение в input type file
Помогите, как записать значение в &lt;input type='file'&gt;. При нажатии на кнопку обзор выбираю файл : с:1.jpg - в поле выдается 'с:1.jpg'....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Знаешь почему 90% людей редко бывают счастливыми?
kumehtar 14.04.2026
Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД
Maks 14.04.2026
Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code
Loafer 13.04.2026
{ "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .
Оптимизация кода на разграничение прав доступа к элементам формы
Maks 13.04.2026
Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений
Maks 12.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .
Архитектура слоя интернета для сервера-слоя.
Hrethgir 11.04.2026
В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа
Maks 10.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании
Maks 09.04.2026
Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru