Как по нажатию на элемент вызвать выбор input(file),Jquery?

Question

[Proshka17]

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

Answer 1

[Андрей Ежгуров]

Да, можно:

$('#button').click(function(){
  $('#inp_file').click();
});

При нажатии на элемент с id="button" происходит эмуляция нажатия на <input type="file" id="inp_file" /> и открывается окно выбора файла.

И не обязательно opacity. Можно и display: none.

Comments

[Евгений Петров]

Просто ноги у opacity растут с тех времён, когда FF не позволял вызвать click на поле с типом file — только ручной click мог вызвать диалоговое окно. Ну так и повелось с тех пор.

[Proshka17]

А как можно программно нажать submit если файл выбран?

[Proshka17]

@eandr_67 А как можно программно нажать submit если файл выбран?

[Андрей Ежгуров]

Не нажать submit, а выполнить метод submit для формы. Т.е. если у нас <form id="inp_form">...</form<, то должно сработать $('#form').submit()

[Андрей Ежгуров]

Ошибся: $('#inp_form').submit()

[Андрей Ежгуров]

Для проверки, что файл выбран можно использовать событие change на input file. В IE 9 и новее должно работать.

А вообще посмотри в сторону blueimp.github.io/jQuery-File-Upload , malsup.com/jquery/form и jqueryvalidation.org . Думаю, функционала этих плагинов хватит для 99% случаев.

Answer 2

[A K]

В целях безопасности такое делать нельзя. Есть два варианта:
1. Флеш - не комильфо
2. Стилизация input-file
Примеры:
habrahabr.ru/post/189570
habrahabr.ru/post/30560

Comments

[Евгений Петров]

А в чём проявляется безопасность при замене внешнего вида, если всё равно используется этот же элемент с type="file", только с opacity:0?