Задача следующая: На сайте пользователь имеет возможность загрузить несколько файлов изображений, загрузка выполняется без перезагрузки страницы, во время загрузки появляется progressbar для каждого изображения в отдельности, когда изображения загрузились, с сервера возвращаются миниатюры изображений и располагаются ниже каждого progressbar. Сейчас реализован один progressbar для всех загружаемых файлов, подскажите, пожалуйста, как можно реализовать для каждого файла по отдельности? html:
<form id="formUploadFiles" enctype="multipart/form-data" action="ajax/UploadFiles" method="POST">
js:
var bar = $('.progressbar');
var percent = $('.percent');
var status = $('#status');
// Ajax загрузка изображений
$('#formUploadFiles').ajaxForm({
beforeSend: function (xhr) {
var inputFile = document.getElementById('upload1').files;
var percentVal = '0%';
//bar.show();
bar.width(percentVal);
percent.html(percentVal);
},
uploadProgress: function (event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal);
},
success: function () {
},
complete: function (xhr) {
status.append(xhr.responseText);
//bar.hide();
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
$(".deletePhoto").unbind('click');
$(".deletePhoto").on('click', function () {
deletePhoto($(this))
})
}
});