Как в JS предотвратить загрузку файла в поле типа input[type="file"]?

Question

Дмитрий Носиков @deimon260993

Web-программист

JavaScript

Как в JS предотвратить загрузку файла в поле типа input[type="file"]?

Добрый день! Подскажите пожалуйста, стояла задача сделать валидацию поля типа Файл на наличие запрещенных расширений и, если пользователь пытается таковые загрузить, загрузку эту прервать.

Валидацию, проверку и прочее я сделал, вопрос в чем: Можно ли как то перехватить загрузку файла, перед его непосредственным попаданием в инпут?
Если расширение подходит - без проблем, файл прикрепляется и дальше можем отправлять форму, если нет - выводим соответствующий эксепшен и загрузку файла прерываем. Пробовал и return false, и e.preventDefault(), все одно. Файл все равно попадает в инпут

Вопрос задан более трёх лет назад
387 просмотров

6 комментариев

Подписаться 1 Оценить 6 комментариев

Сергей delphinpro @delphinpro Куратор тега JavaScript

Почему не взять готовый валидатор? Например этот www.formvalidator.net/#file-validators

Написано более трёх лет назад
Дмитрий Носиков @deimon260993 Автор вопроса

Сергей: Спасибо за ответ) Уже решил задачу, буквально через пол минуты после написания данного вопроса)

Написано более трёх лет назад
xmoonlight @xmoonlight

Дмитрий Носиков: а озвучьте решение (если возможно). Спасибо.

Написано более трёх лет назад
Дмитрий Носиков @deimon260993 Автор вопроса
xmoonlight: Так как я использую обработчик события на изменение инпута, то сделал вот так:
$('.file-input input[type="file"]').on('change', function(){ var $this = $(this), fileName = $this.files[0].name; if(!checkFileExt(fileName)) $this.val(''); });

Код, естественно, сокращённый, но суть, я думаю, ясна. Я просто очищаю поле, если файл в нём не подходит по формату, а далее вывожу пользователю соответствующее сообщение)
Написано более трёх лет назад
xmoonlight @xmoonlight

Дмитрий Носиков: ну да, более чем корректно! Спасибо.

Написано более трёх лет назад
Дмитрий Носиков @deimon260993 Автор вопроса

xmoonlight: Пожалуйста))

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 10 часов назад
- 51 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 10 часов назад
- 73 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- 15 часов назад
- 101 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 15 часов назад
- 73 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 16 часов назад
- 37 просмотров
1

ответ
JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- вчера
- 43 просмотра
1

ответ
JavaScript

Средний
Как создать кроссбраузерный функиональный плеер?
- 1 подписчик
- вчера
- 64 просмотра
0

ответов
JavaScript

+1 ещё

Средний
Почему функция mnemonicToWalletKey из библиотеки тон генерирует неверный адрес кошелька?
- 1 подписчик
- вчера
- 48 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как передавать данные гугл таблицы в телеграм при добавлении новой записи?
- 1 подписчик
- вчера
- 58 просмотров
0

ответов
JavaScript

Простой
Проблема с добавлением полей товара в куки, почему-то при клике ничего в куки не записывает, что делать?
- 1 подписчик
- вчера
- 33 просмотра
2

ответа
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

Мэтч

от 80 000 ₽

Настройка сервера

18 апр. 2024, в 21:56

2000 руб./за проект

Помощь с водпресс

18 апр. 2024, в 21:00

150 руб./за проект

Устранить проблемы с парсерами и отображением новостей

18 апр. 2024, в 20:08

7000 руб./за проект

Почему не взять готовый валидатор? Например этот www.formvalidator.net/#file-validators
Сергей: Спасибо за ответ) Уже решил задачу, буквально через пол минуты после написания данного вопроса)
Дмитрий Носиков: а озвучьте решение (если возможно). Спасибо.
xmoonlight: Так как я использую обработчик события на изменение инпута, то сделал вот так:
$('.file-input input[type="file"]').on('change', function(){ var $this = $(this), fileName = $this.files[0].name; if(!checkFileExt(fileName)) $this.val(''); });

Код, естественно, сокращённый, но суть, я думаю, ясна. Я просто очищаю поле, если файл в нём не подходит по формату, а далее вывожу пользователю соответствующее сообщение)
Дмитрий Носиков: ну да, более чем корректно! Спасибо.

Answer 1 · 2017-06-01 21:12:37

А вариант делать кнопку "Загрузить" не активной, если не прошла валидация, не подходит?
Насколько я понимаю такая проверка делается на сервере.

Как в JS предотвратить загрузку файла в поле типа input[type="file"]?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт