СтатьиРазработка в HTML, CSS, jQuery

Отправка (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>

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

Имя файла:


Комментарии

Имя:
Текст комментария:
* В комментариях запрещено публиковать рекламные объявления. Сообщения, содержащие ссылки на сторонние ресурсы добавляется в скрытом режиме. Они будут открыты, если не нарушают установленных правил, после проверки.
Защита от спам-роботов (* Обязателельно укажите ответ на простой вопрос ниже.)
Под каким номером в алфавите буква «Б»? (цифра)