Эмуляция нажатия файл-инпута

Формы, пожалуй, один из самых важных элементов на странице и их стилизация щекотливый момент при верстке. Главное назначение форм это обмен информации между пользователем и сервером. Самые часто используемые теги форм — input, textarea, select, label.

Из всех этих тегов, самым неудобным для стилизации оказался input[type=»text»]. На хабрахабре была статья в которой как раз рассказывалось о том, как можно изменить внешний вид файлового инпута и том почему реализовать это не просто — в первую очередь это связано с безопасностью, во вторую с тем, что каждый браузер по своему отображает этот элемент, и на это почти нельзя повлиять. В статье были проанализированы все браузеры и в итоге выработано единое решение.

Я хочу предложить другое решение этой проблемы.

  1. Наш файл-инпут и картинка
    <div>
      <input name="img_uploadCat" type="file" />
      <img src="https://codernote.ru/files/button_choosefile.png" alt="" name="withoutImg" />
      <p>Выбранный файл:</p>
    </div>

     

  2. CSS
    input {
      position: absolute;
      display: none;
    }
    
    img {
      cursor: pointer;
      padding-left: 2px
    }

     

  3. 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]

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *