Нещодавно зіткнувся з цікавим завданням: на сторінці потрібно розмістити призначену для користувача форму, в якій було кілька полів для введення даних і поле для вибору файлу. Причому, кнопка вибору файлу зроблена саме як красива кнопка, а не стандартний компонент input [file]. А відправка цієї форми, відповідно до технічного завдання, повинна виконуватися відразу після вибору файлу. У результаті повинна вийде подібна призначена для користувача форма:
Тут можна виділити дві окремі завдання. Перша - виконати відправку форми відразу після вибору файлу. Друга - оформити компонент вибору файлу відповідно до дизайну у вигляді нестандартної кнопки.
Форма, для якої реалізуємо всі описані завдання, має наступний вихідний код:
і на початку виглядає так:
Submit форми після вибору файлу в input [file]
Подібна задача розглядалась в статті про перезавантаження та оновлення сторінки вибором в select. Там так само використовувалося подія компонента форми для відправки форми за допомогою скрипта.
Виконати надсилання форми можна за допомогою jQuery коду:
Цей виклик потрібно прив'язати до події change (оновленню) компонента вибору файлу input [type = file]. В результаті код jQuery для вирішення нашої форми повинен бути наступний:
Власне оформлення input [file] засобами CSS
Складність цього завдання полягає у відсутності стандартів оформлення компонента. У різних браузерах він відображається його по-різному. А CSS стилів, що визначають його зовнішній вигляд не досить, щоб оформити його.
Найпростіший спосіб для вирішення цього завдання буде приховати сам компонент, а виклик його виконувати після натискання на інший елемент. При цьому виникає питання тільки про те, як зв'язати натискання на "призначену для користувача кнопку" з викликом стандартного події вибору файлу.
Одним з варіантів може бути знову застосування jQuery. Але, на мій погляд, якщо є можливість обійтися без додаткових скриптів, а використовувати тільки теги HTML, то варто робити без скриптів. І тут нам на допомогу приходить тег HTML label. У статті "Перемикання radio кнопки і checkbox натисканням на підпис в HTML" вже описувалося його застосування.
Тут, так само, тег компонента вибору файлу обрамляється тегом label. У label так само додамо текст "Завантажити файл"
Тепер залишається тільки призначити стилі для оформлення наявних тегів. Компонент вибору файлів ховається. Тегу label, надаємо потрібний зовнішній вигляд:
У підсумку, зібравши разом розроблені скрипти і стилі, отримуємо красиву форму, де вибір файлу відбувається після натискання на красивою кнопці, а після вибору файлу виконується відправка форми: