Мучает вопрос, как грамотно реализовать множественную загрузку файлов, чтобы при загрузке у каждого файла был свой progress bar.
Делал по примеру из статьи https://habr.com/post/109079
Изначально в инпут выбираем нужные файлы, затем при нажатии кнопки "загрузить", js прогоняет объект FileList на наличие выбранных в инпуте файлов и для каждого из них делает ajax запрос с отображением состояния файла, а на выходе сервер (испольую PHP) обрабатывает каждый файл по одному. Насколько эта реализация оправдана и есть ли другие способы реализовать подобное? (без использования сторонних плагинов).
$(document).ready(function(){
$('#file-input').on('change', function(){
var files = $(this).prop('files');
$('#file-container').empty();
for(var file of files)
{
//создаем превью из названия файла и програсс бара
var elem = $('<div class="file-previev"><p>'+file.name+'</p><progress class="file-progress" value="0" max="100"></progress></div>').appendTo($('#file-container'));
//добавляем к контейнеру с превью свойство файла для передачи
elem.get(0).fileInfo = file;
}
});
$('#start').on('click', function(e){
e.preventDefault();
$('#file-container').find('.file-preview').each(function(){
var file = this.file;
var progress = $(this).find('.file-progress');
$.ajax({
url: '/',
type: 'post',
contentType: false,
processData: false,
data: file,
xhr: function(){
var xhr = $.ajaxSettings.xhr();
xhr.upload.onprogress = function(evt){
var percent = Math.ceil(evt.loaded/evt.total);
$(progress).attr('value', percent);
}
},
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-upload" method="post">
<input id="file-input" type="file" multiple="true"/>
<button id="start" type="submit">Загрузить</button>
</form>
<div id="file-container"></div>
Собственно все подобные решения, которые я видел всегда подразумевают то, что на каждый файл посылается отдельный ajax запрос, который обрабатывает файл. Смущает этот момент, поскольку без реализации progress bar, просто собирают массив из инпут с именем file[] и в php работают с массивом файлов. А также не совсем понятно, как именно тут с помощью ajax передать файл в PHP и правильно его обработать, ибо видел разные реализации как в этом коде, так и с использованием объекта FormData.