Контакты

Поиск по сайту

Категория: Chronoforms5 Опубликовано: 22 Март 2015

Про стилизацию поля типа file много написано в интернете. Поэтому речь пойдет не сколько о ней, сколько о предварительной для нее подготовке для форм в компоненте Chronoforms5.

На форумах чаще всего предлагается способ скрытия самого поля file путем изменения его прозрачности и наложения поверх какого-либо элемента, содержащего изображение. Второй вариант — скрытие самого input flie и вызов его основного метода по клику. Решила остановиться на второй альтернативе.

Общий принцип такой:

  1. Размещаем на форме поле file field, которое скроем после проверки работы скрипта.
  2. Так же размещаем вспомогательный элемент Custom, который позволит нам разместить html-код всех необходимых декоративных элементов. У меня это один div-обертка, span-кнопка, span для текста из переменной поля file field и span-label.
  3. С помощью js-кода вызовим выбор файлов для отправки по событию клика по span-кнопке.

Открываем форму, куда будем добавлять поле. Или можно взять «демку» любой формы из уже имеющихся в компоненте («Компоненты» — «Chronoforms5» — «Demo»).

Открываем мастер формы (вторая вкладка — «Designer»).

Добавляем на форму элементы «File Field» (из репозитория «Basic») и «Custom» (из репозитория «Advanced»).

У меня получились такие поля:

Редактируем настройки.

В поле file6 оставляем все как есть.

  • Load state: Visible&Enabled.

Для Custom настройки такие (кликаем «Редактировать» — вкладка «Общие»):

  • Label: Прикрепить файл
  • Code:
    <div id="mfilebackgr">
      <span class="button"> <b>Обзор...</b> </span>
      <span id="mfileval">файл не выбран</span> <br>
      <span class="label">Вы можете прикрепить к письму архив в формате .zip или .rar размером не более 20Мб.</span>
    </div>
    
    где:
    • #mfilebackgr: div-оболочка
    • .button: span-кнопка
    • #mfileval: span для текстового содержимого переменной поля file6
    • .label: span для нижней надписи (если нужна).

Теперь самое главное — вкладка «Install» здесь же, в мастере нашей формы.

Настраиваем саму отправку файла.

В репозитории из группы «Basic» выбираем «Files Upload». Прикрепляем отправку к событию «onSubmit».

Кликаем на «Files Upload» — «Редактировать» (edit) и прописываем основные настройки. Они должны получиться примерно такими.

Тип и размер файла выбираем свои, достаточные для дальнейшей проверки работы формы.

Сохраняем.

Так же, открываем в событии «On submit» редактор «email» и в самом низу вкладки «Основные» (Basic) прописываем «file6» в поле «Attachment file».

Настраиваем прием переменной в  span#mfileval по событию onchange поля file6.

Здесь же, во вкладке «Install», из «Basic» выбираем «Load JavaScript». Его прикрепляем к событию «On Load» и открываем для редактирования.

В поле «Js Code» пишем нашу функцию (можно на чистом js, не обязательно на jquery).

jQuery(document).ready(function(){

    jQuery('span.button').on('click',function(){
         jQuery('#file6').trigger('click');
     });     
    jQuery('#file6').on('change',function(event){
         var val = this.value;
         jQuery('#mfileval').text(val);         
    });
});

Вешаем основную функцию на событие document.onready, иначе скрипт просто не увидит наших элементов.

Сохраняем и смотрим, что у нас на странице.

Проверяем кликом по нашей кнопке  с классом button. Если все сделали правильно, то имя загружаемого файла должно появиться в виде текста в span #mfileval.

Теперь скрываем поле file6. Во вкладке «Designer» ничего не меняем, т.к если использовать hidden в load state или style для поля  file6, сработает защита и с webkit-браузеров мы файл не отправим.

Во вкладке «Install» к событию «On load» приаттачиваем «Load Css». Открываем его для редактирования и прописываем для родительского блока нашего поля file6 свойства: position:relative; overflow:hidden; width:0; height:0. Таким образом, скрыли весь блок.

На этом подготовку поля к стилизации можно считать законченной.

Проверено в браузерах: FireFox 8, 32; Opera 11, 24; Google Chrome 11, 17, 24; Safari 5; IE 8. Работает везде, кроме IE.

В IE  срабатывает защита. Он по первому сабмиту вообще очищает переменную поля  file6, а по второму только отправляет письмо (без файла).  Можно попробовать решить задачу конкретно для него в том же скрипте, дописав код при условии  navigator.userAgent.search(/MSIE/) > 0 или, отказавшись от этого способа, воспользоваться z-index и opacity:0.  Но у IE с opacity та же проблема.

Добавить сообщение

Форма входа

Индекс цитирования Яндекс.Метрика