I don't know how to do that, only two files sent to the server at the same time just like here UploadImages.In my code all the files are sent all at the same time. Here is my code. Words needed to fill the post. Words needed to fill the post.
var percent_info = document.querySelectorAll('.progress_bar:not(.trans_completed) .percent');
var p_bar = document.querySelectorAll('.progress_bar:not(.trans_completed)');
/* --- Upload files to server loop --- */
for (var i = 0; i < files.length; i++) {
uploadFile(files[i], percent_info[i], p_bar[i]);
}
function uploadFile(file, percent_info, p_bar) {
var url = "server/index.php";
if (file.type.match(imageType)) {
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
if (percentLoaded < 100) {
percent_info.style.width = percentLoaded + "%";
}
}
});
xhr.upload.addEventListener("load", function(e) {
var percentLoaded = Math.round((e.loaded / e.total) * 100);
percent_info.style.width = percentLoaded + "%";
});
function ready() {
return function() {
if (xhr.readyState == 4 && xhr.status == 200) {
p_bar.classList.add('trans_completed');
}
};
}
xhr.onreadystatechange = ready();
xhr.open("POST", url, true);
fd.append('uploaded_file', file);
xhr.send(fd);
}
};
</div>