Загрузка массива файлов по одному

246

10 марта 2018, 17:52

В html загрузить несколько файлов сразу можно такой конструкцией:

<input type="file" id="files" name="files[]" multiple />

Но чтобы она загрузила несколько файлов, их надо сразу все выбрать. Как можно сделать загрузку файлов "по одному"? Чтобы каждый новый загружаемый файл добавлялся к этому массиву. Можно конечно вывести 20 кнопок и у тебя будет 20 возможных нажатий, но выглядеть это будет не очень.

Answer 1

К сожалению напрямую через js вносить изменения в файлы инпута нельзя из соображений безопасности, иначе можно было бы поиграться с перебрасыванием ивента на спрятанный инпут с последующим переносом результат в главный ипнут :( Если вы используете в своем софте кастомный браузерный движок, то можете пошаманить с настройками безопасности.

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

$('input').one('change', appendInput); 
 
function appendInput() { 
  $(this).parent().append(`<br><label>Файл ${$('input').length+1}</label><input type='file'/>`); 
  $(this).nextAll('input:first').one('change', appendInput); 
}

label { 
  padding-right: 2%; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class=container> 
  <label>Файл 1</label><input type='file' /> 
</div>