2

В форме обратной связи есть возможность прикреплять к письму файлы.

Вот такая конструкция:

<label for="question_answer">Прикрепить файлы:</label>
<input name="attachments[]" type="file" multiple>

С помощью этой конструкции возможно выбрать в открывшимся окне или один, или же сразу несколько файлов. Возможно ли как-то с помощью jquery разрешить в этой форме в открывшимся окне выбор только одного файла, и при его выборе, чтобы скрипт добавлял кнопку "добавить еще файл", при нажатии на которую будет добавляться еще одно поле с возможностью выбрать следующий файл (предел - 10 файлов)? При этом, при добавлении следующего инпута, предыдущий должен прятаться (или становиться просто неактивным).

2
  • 1
    А должна быть возможность удалять уже подключенные файлы?
    – Cheg
    18 сен 2017 в 20:32
  • Тогда и редактировать тоже?
    – Cheg
    18 сен 2017 в 20:42

2 ответа 2

3
+50

Постарался учесть все нюансы, но, возможно, что-то можно улучшить, а что-то и вовсе упростить.

$('.attach').each(function() { // на случай, если таких групп файлов будет больше одной
  var attach = $(this),
    fieldClass = 'attach__item', // класс поля
    attachedClass = 'attach__item--attached', // класс поля с файлом
    fields = attach.find('.' + fieldClass).length, // начальное кол-во полей
    fieldsAttached = 0; // начальное кол-во полей с файлами

  var newItem = '<div class="attach__item"><label><div class="attach__up">Добавить файл</div><input class="attach__input" type="file" name="files[]" /></label><div class="attach__name"></div><div class="attach__edit">Изменить</div><div class="attach__delete">Удалить</div></div>'; // разметка нового поля

  // При изменении инпута
  attach.on('change', '.attach__input', function(e) {
    var item = $(this).closest('.' + fieldClass),
      fileName = '';
    if (e.target.value) { // если value инпута не пустое
      fileName = e.target.value.split('\\').pop(); // оставляем только имя файла и записываем в переменную
    }
    if (fileName) { // если имя файла не пустое
      item.find('.attach__name').text(fileName); // подставляем в поле имя файла
      if (!item.hasClass(attachedClass)) { // если в поле до этого не было файла
        item.addClass(attachedClass); // отмечаем поле классом
        fieldsAttached++;
      }
      if (fields < 10 && fields == fieldsAttached) { // если полей меньше 10 и кол-во полей равно
        item.after($(newItem)); // добавляем новое поле
        fields++;
      }
    } else { // если имя файла пустое
      if (fields == fieldsAttached + 1) {
        item.remove(); // удаляем поле
        fields--;
      } else {
        item.replaceWith($(newItem)); // заменяем поле на "чистое"
      }
      fieldsAttached--;

      if (fields == 1) { // если поле осталось одно
        attach.find('.attach__up').text('Загрузить файл'); // меняем текст
      }
    }
  });

  // При нажатии на "Изменить"
  attach.on('click', '.attach__edit', function() {
    $(this).closest('.attach__item').find('.attach__input').trigger('click'); // имитируем клик на инпут
  });

  // При нажатии на "Удалить"
  attach.on('click', '.attach__delete', function() {
    var item = $(this).closest('.' + fieldClass);
    if (fields > fieldsAttached) { // если полей больше, чем загруженных файлов
      item.remove(); // удаляем поле
      fields--;
    } else { // если равно
      item.after($(newItem)); // добавляем новое поле
      item.remove(); // удаляем старое
    }
    fieldsAttached--;
    if (fields == 1) { // если поле осталось одно
      attach.find('.attach__up').text('Загрузить файл'); // меняем текст
    }
  });
});
.attach__head {
  border-bottom: #000 solid 1px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0 0 5px 0px;
  margin: 0 0 5px 0;
}

.attach__item {
  border-bottom: #ccc solid 1px;
  padding: 0 0 5px 0px;
  margin: 0 0 5px 0;
}

.attach__item:last-of-type {
  margin-bottom: 0px;
  border-bottom: none;
}

.attach__up {
  cursor: pointer;
}

.attach__edit,
.attach__delete {
  display: none;
  margin-right: 10px;
  cursor: pointer;
}

.attach__edit {
  color: #2f7dfe;
}

.attach__delete {
  color: #f00;
}

.attach__item--attached .attach__up {
  display: none;
}

.attach__item--attached .attach__edit,
.attach__item--attached .attach__delete {
  display: inline-block;
}

.attach__input {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form>
  <div class="attach">
    <div class="attach__head">Прикрепите файлы (максимум 10 файлов):</div>
    <div class="attach__item">
      <label>
        <div class="attach__up">Загрузить файл</div>
        <input class="attach__input" type="file" name="files" />
      </label>
      <div class="attach__name"></div>
      <div class="attach__edit">Изменить</div>
      <div class="attach__delete">Удалить</div>
    </div>
  </div>
</form>


UPDATE

Переписал логику работы:

  • Новое поле теперь не является клоном старого, а формируется из заранее заданной разметки - это позволит избежать проблем с дублированными файлами при отправке и устранит "невозможность" повторного добавления файла после его "удаления";
  • Поменялись условия проверки для добавления/изменения/удаления файлов;
  • Исправлена ошибка, не позволяющая добавить новый файл, если при максимальном количестве полей было удалено одно из полей;
  • Классы полей вынесены в отдельные переменные для удобства.
4
  • 1
    @LADYX благодарю!
    – Cheg
    19 сен 2017 в 20:20
  • @LADYX тут вам нужно искать проблему в скриптах, реализующих сбор данных с формы и их отправку дальнейшую отправку. Я так понимаю, это уже вопрос по php
    – Cheg
    21 сен 2017 в 16:55
  • @LADYX понял. Как буду свободен, постараюсь поправить все
    – Cheg
    22 сен 2017 в 17:52
  • @LADYX к сожалению, это из-за того, что у webkit-браузеров при отмене повторного выбора файла очищается инпут. Отсюда получается, что при таких действиях остается одновременно 2 пустых поля
    – Cheg
    1 окт 2017 в 8:19
2

У вас input содержит [] и multiple, это надо убрать для ввода одного имени файла.

Кнопка "еще" не нужна, можно сразу добавлять пустой инпут. Код ниже. При изменении значения последнего инпута после него вставляется еще один.

$(document.body).on('change', 'form input[type="file"]', function() {
  $this = $(this);
  if ($this.is(':last-of-type')) {
    $this.after($('<br><input name="attachment" type="file">'));
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <label for="question_answer">Прикрепить файлы:</label>
  <input name="attachment" type="file">
  <br>
  <button type="submit">Submit</button>
</form>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.