Gravity Forms, jQuery ajaxError () и стиль ввода файла: сохранение значения файла после ошибки - PullRequest
Новая
       12

Gravity Forms, jQuery ajaxError () и стиль ввода файла: сохранение значения файла после ошибки

1 голос
/ 17 января 2012

Я использую плагин Gravity Forms для загрузки файла.Отправка формы и обработка ошибок работает как надо.Тем не менее, я сделал некоторые изменения в форме, чтобы стилизовать ввод файла (просто добавил немного HTML, CSS, + jQuery).Следующий CSS помещает стилизованную кнопку и поле (выглядит как поле, но на самом деле это просто div), содержащийся внутри .upload-fake, в том же горизонтальном + вертикальном пространстве, что и вход, но непрозрачность ввода установлена ​​в 0, так что вытолько увидеть кнопку.Z-индекс ввода помещает его сверху из .upload-fake, поэтому при нажатии на кнопку или поле запускается кнопка загрузки.

Вот небольшой скриншотsetup форма со стилевым вводом файла

Соответствующий HTML + CSS (#input_1_3 - это ввод файла): 

<div class="upload-fake"> 
     <a class="button green yanone">Choose File</a> 
     <div class="file-status">File</div> 
</div>


#input_1_3 {
    width: 100%;
    height: 30px;
    position: relative;
    z-index: 2;
    opacity: 0 !important;
    filter: alpha(opacity=0) !important; 
    -ms-filter: "alpha(opacity=0)" !important;
    -khtml-opacity: 0 !important; 
    -moz-opacity: 0 !important
}

.upload-fake {
    position: relative;
    z-index: 1;
    margin-top: -30px;
    clear: both
}

Кроме того, я использую следующий скриптзаписать имя файла в .file-status.По умолчанию текст в поле «Файл».Это работает должным образом, если только нет ошибки проверки. 

$('input[type=file]').live("change", function(e){
    var AllowedExtension = ['jpeg', 'jpg'],
        $me = $(this),
        $file = $('.file-status');
        value = $me.val(),
        shortvalue = value.split("\\").pop(),
        allowed = value.split('.').pop().toLowerCase();

    $file.removeClass('error');
    if ($.inArray(allowed, AllowedExtension) == -1) {
        $file.text('only JPG or JPEG allowed').addClass('error');
    } else {
        if(shortvalue.length >= 30) {shortvalue = shortvalue.substr(0,27) + '...';}
        $file.text(shortvalue);
    }
});

Гравитационные формы перезагружают мой HTML в исходное состояние (не включая измененный текст из приведенного выше скрипта jQuery), поэтому текст внутри .upload-fake .file-status получает сброс обратно к «файлу», даже если файл был выбран и записан в поле перед отправкой.

Я хотел бы сделать следующее:

  1. Сохранитьвходное значение файла в переменной перед отправкой
  2. Если есть ошибка, сбросьте значение входного файла в ту переменную, которая была установлена ​​до отправки

Я пытался использовать$.ajaxError(function(){ ... }), но, похоже, он даже не срабатывает, когда форма выдает ошибку.

У кого-нибудь есть опыт или идеи?!

...