Загрузка нескольких файлов с индикатором выполнения для каждого файла перетаскивания
Так что я реализовал функцию загрузки Dreg и Drop, которая работает отлично. Я реализовал индикатор выполнения, чтобы показать прогресс загрузки файлов. Моя проблема в том, что я хочу показать индикатор выполнения для каждого загруженного файла. но нет способа обновить прогресс для каждого файла.
Мой фронтэнд.
<div id="drop_zone">Drop files here</div>
<progress></progress>
Javascript
function handleDragOver(event) {
event.stopPropagation();
event.preventDefault();
var dropZone = document.getElementById('drop_zone');
dropZone.innerHTML = "Drop now";
}
function handleDnDFileSelect(event) {
event.stopPropagation();
event.preventDefault();
/* Read the list of all the selected files. */
files = event.dataTransfer.files;
/* Consolidate the output element. */
var form = document.getElementById('form1');
var nm2="";
var data = new FormData(form);
for (var i = 0; i < files.length; i++) {
data.append(files[i].name, files[i]);
}
$.ajax({
type: "POST",
url: "/WebServices/uploadservice.asmx/uploadfile",
xhr: function () { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) { // Check if upload property exists
myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // For handling the progress of the upload
}
return myXhr;
},
data: data,
cache: false,
contentType: false,
processData: false,
success: function (res) {
// $("#uploadedfiles").append(res);
},
error: function (err) {
}
});
function progressHandlingFunction(e){
if (e.lengthComputable) {
$('progress').attr({ value: e.loaded, max: e.total });
count++;
}
}
}
if (window.File && window.FileList && window.FileReader) {
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleDnDFileSelect, false);
}
else {
alert('Sorry! this browser does not support HTML5 File APIs.');
}
Веб-сервис, который сохраняет файл
public string uploadfile()
{
string savedfile = "";
try
{
HttpFileCollection fileCollection = HttpContext.Current.Request.Files;
for (int i = 0; i < fileCollection.Count; i++)
{
try
{
HttpPostedFile upload = fileCollection[i];
int f = fileCollection[i].ContentLength;
string filename = "/ProductImages/" + fileCollection[i].FileName;
upload.SaveAs(Server.MapPath(filename));
savedfile = fileCollection[i].FileName + "<br/>";
}
catch
{
}
}
return savedfile;
}
catch(Exception ex)
{
return ex.Message.ToString();
}
}
Общий прогресс для загрузки отображается правильно. Я пробовал разные методы, чтобы показать индивидуальный прогресс файла. например, динамическое создание индикатора выполнения в цикле for и выполнение отдельного вызова веб-службы для каждого файла, а не одновременный вызов для всех файлов, но это не работает, поскольку xmlhttprequest всегда работает асинхронно. Любые решения