Как с помощью jQuery реализовать клик по input[type="file"]?

Question

[Evanre]

Необходимо стилизовать кнопку выбора файла. В макете не предусматривается поля с именем файла. т.е. мне просто нужно сделать красивую кнопку, клик по которой будет открывать окно выбора файла.
В интеренете полно всяких плагинов и прочей мути. Но почему я не могу скрыть нативный input и сделать элементарный клик по любому html элементу который можно реализовать как кнопкку? например label'у? Я сперва так и попробовал, но работает оно почему то криво: я кликаю по label'у, открывается окно выбора файла, я выбираю, жму "выбрать", окно закрывается и открывается опять снова, выбираю еще раз и только тогда все проходит, т.е. каждый раз вылетает окно 2 раза.
Почему данная конструкция работает криво?

<label for="file-input" id="file-input-label">добавить изображение</label>
	<input type="file" id="file-input" accept="image/jpeg,image/png,image/gif">

$("#file-input-label").click(function(){
	$("#file-input").click();
})

РЕШЕНИЕ: Разобрался в чем была беда: я кликал по лейблу, который уже был подвязан на инпут. т.е. срабатывал клик через jquery и еще один, нативный через label for="".
Так что можно делать это хоть через jquery, хоть через label for="". И так и так будет работать. Всем большое спасибо.

Answer 1

[Кирилл Туровников]

Js в данном случае совсем не нужен, если input вложен в label, то при клике по label - input поймает фокус, в случает с input[type=file] - откроется. Сам input можете сделать display:none; если он вам не нужен.

Comments

[Никита]

кстати не обязатально вкладывать инпут в лэйбл, у лейбла достаточно for указать

[Кирилл Туровников]

Да это так, но если for и id не указаны, то можно и просто как я выше написал.

[Evanre]

Все гениальное просто. Не понимаю почему я сам до этого не допер... Ведь постоянно это использую с radio и checkbox. Спасибо большое.

Answer 2

[Виталий Киренков]

Давайте я вам предложу альтернативу без скриптов.

Делаете некий див. Стилизуете его как вам нужно. Даёте ему position: relative; overflow: hidden. Внутрь него кладете input и ставите ему position: absolute и задаете ему ширину и высоту под размер вашей кнопки, и после это магия - ставите ему opacity: 0 =) Работает как часы.

Comments

[Evanre]

Хороший вариант, спасибо. Но тут предложили еще проще)

[Виталий Киренков]

Евгений Жученко: вот и отвечай потом людям...

[Evanre]

Виталий Киренков: Я же поблагодарил Вас за ответ. Что нет так? Вы предложили хороший вариант, но он не самый лучший.

[Виталий Киренков]

Евгений Жученко: Лучший / не лучший - факт в том, что он рабочий.

Answer 3

[Артур Атнагулов]

Я делаю обычно просто див, ловлю клик по нему, и передаю его на input[type=file] (как у Вас в вопросе указано). Все прекрасно работает. Многократно применял

Comments

[Evanre]

Все верно. Разобрался в чем была проблема. Все изложил под вопросом. Спасибо.