Как повесить click на label с input?

215

27 июля 2021, 00:20

Делаю на Wordpress форму с возможностью добавления нескольких фалов путём создание нескольких заранее определённых инпутов:

Несколько одинаковых (кроме адишников) инпутов. Код каждого блока такой:

<label class="feedback-form-block-upload-label feedback-form-block-upload-label-plus" data-upload-label>
     [file file-265 id:file-265 class:feedback-form-block-upload]
     <img id="file-265-img" src="#" alt="">
</label>

так выглядит, потому что это Contact Form 7. Т.е. по первому клику загружается файл и появляется картинка этого файла на месте img. И label присваивается класс "active" А вот по второму клику на тот же блок надо запускать скрипт очистки файла:

Вот нашёл такое: https://jsfiddle.net/rPaZQ/23/. Вроде работает.

Но дело в том, что я не знаю, на что и как повесить описанный в скрипте клик. При повторном клике на label с загруженным файлом открывается диалог выбора файла. Это не работает:

jQuery('label.active').click(function(e){
        e.wrap('<form>').closest('form').get(0).reset();
        e.unwrap();
        e.preventDefault()
});

Нужно как-то переназначить клик по label, чтобы он не срабатывал как триггер для input. Возможно используя класс этого label...

Answer 1

Можно проверять, пустое ли поле с файлом и в зависимости от этого выполнять нужное действие

<label>
  <input type="file">
  Кнопка загрузки
</label>

   $('label').click(function (e) {
        var input = $(this).find('[type="file"]').get(0);
        if (input.files.length) {
          e.preventDefault();
          input.value = '';
          console.log('Клик лейбл (удаление файла)')
        } else {
          console.log('Клик лейбл (загрузка файла)')
        }
      },
    );