Эмуляция нажатия файл-инпута
Формы, пожалуй, один из самых важных элементов на странице и их стилизация щекотливый момент при верстке. Главное назначение форм это обмен информации между пользователем и сервером. Самые часто используемые теги форм — input, textarea, select, label.
Из всех этих тегов, самым неудобным для стилизации оказался input[type=”text”]. На хабрахабре была статья в которой как раз рассказывалось о том, как можно изменить внешний вид файлового инпута и том почему реализовать это не просто – в первую очередь это связано с безопасностью, во вторую с тем, что каждый браузер по своему отображает этот элемент, и на это почти нельзя повлиять. В статье были проанализированы все браузеры и в итоге выработано единое решение.
Я хочу предложить другое решение этой проблемы.
- Наш файл-инпут и картинка
<div> <input name="img_uploadCat" type="file" /> <img src="https://codernote.ru/files/button_choosefile.png" alt="" name="withoutImg" /> <p>Выбранный файл:</p> </div>
- CSS
input { position: absolute; display: none; } img { cursor: pointer; padding-left: 2px }
- JQuery
$( document ).ready(function() { $("img[name='withoutImg']").attr('onclick', '$(this).parent().find("input[name=\'img_uploadCat\']").click()'); })
Итак. В чем же суть? А все просто – скрываем нашу кнопку, и с помощью JQuery при клике по картинке передаем управление файл-инпуту.
Пример работы:
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”JGvQJb” default_tab=”result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/JGvQJb/’>JGvQJb</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]