Как прикреплять файлы в форме обратной связи поочередно?

290

18 сентября 2017, 05:33

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

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

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

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

Answer 1

У вас 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

как найти елементы по классу в обьекте

как можно найти елементы по классу используя обьекты, проблема с этим кодом что он не находим елементы которые мы задаем в var rect = new Rectangle("elem",...

328

javascript