Отправка (submit) формы после выбора файла с оформлением input[file]

Недавно столкнулся с интересной задачей: на странице нужно разместить пользовательскую форму, в которой было несколько полей для ввода данных и поле для выбора файла. Причем, кнопка выбора файла сделана именно как красивая кнопка, а не стандартный компонент input[file]. А отправка этой формы, в соответствии с техническим заданием, должна выполняться сразу после выбора файла. В итоге должна получится подобная пользовательская форма:

Здесь можно выделить две отдельные задачи. Первая – выполнить отправку формы сразу после выбора файла. Вторая – оформить компонент выбора файла в соответствии с дизайном в виде нестандартной кнопки.

Форма, для которой реализуем все описанные задачи, имеет следующий исходный код:

<form action="" method="get" id="myform">
  <p>Имя файла: <input type="text"></p>
  <p><input id="myfile" type="file"></p>
</form>

и в начале выглядит так:

Submit формы после выбора файла в input[file]

Подобная задача рассматривалась в статье о перезагрузке и обновлении страницы выбором в select. Там так же использовалось событие компонента формы для отправки формы с помощью скрипта.

Выполнить отправку формы можно с помощью jQuery кода:

$("#ID_формы").submit();

Этот вызов нужно привязать к событию change (обновлению) компонента выбора файла input[type=file]. В итоге код jQuery для решения нашей формы должен быть следующий:

<script type="text/javascript">
  jQuery(function(){
    $("#myfile").change(function(){ // событие выбора файла
      $("#myform").submit(); // отправка формы
    });
  });
</script>

Собственное оформление input[file] средствами CSS

Сложность этой задачи заключается в отсутствии стандартов оформления компонента. В различных браузерах он отображается его по-разному. А CSS стилей, определяющих его внешний вид не достаточно, чтобы оформить его.

Самый простой способ для решения этой задачи будет скрыть сам компонент, а вызов его выполнять по нажатию на другой элемент. При этом возникает вопрос только о том, как связать нажатие на "пользовательскую кнопку" с вызовом стандартного события выбора файла.

Одним из вариантов может быть снова применение jQuery. Но, на мой взгляд, если есть возможность обойтись без дополнительных скриптов, а использовать только теги HTML, то стоит делать без скриптов. И здесь нам на помощь приходит тег HTML label. В статье "Переключение radio кнопки и checkbox нажатием на подпись в HTML" уже описывалось его применение.

Здесь, подобным образом, тег компонента выбора файла обрамляется тегом label. В label так же добавим текст "Загрузить файл"

<form action="" method="get" id="myform">
<p>Имя файла: <input type="text"></p>
<p><label id="mylabel"><input id="myfile" type="file">Загрузить файл</label></p>
</form>

Теперь остается только назначить стили для оформления имеющихся тегов. Компонент выбора файлов скрывается. Тегу label, придаем нужный внешний вид:

<style>
  #myform p {
    text-align : center;
    margin : 10px 0;
  }
  #myform #myfile {
    display : none;
  }
  #myform #mylabel {
    background-color : #fd685b;
    padding : 10px 20px;
    color : #fff;
    cursor : pointer;
  }
</style>

В итоге, собрав вместе разработанные скрипты и стили, получаем красивую форму, где выбор файла происходит по нажатию на красивой кнопке, а после выбора файла выполняется отправка формы:

??????