Im trying to make an upload script with jQuery and a loading bar aswell.
I got a field with multiple upload possibility. Every file gets two second on the loading bar.
So to count the time i have this:
var length = array.length;
var time = length*2;
var totalTime = time*1000; // To count the totaltime, not milliseconds.
My question now is, if i upload several files, we say like 3 files. Then i have 6 seconds in the loading bar, is there a way to make a function fire every two seconds? Do i have to do this outside the animation with setinterval? If so how do i stop a setinterval? Or is it possible to do it inside the animation?
$(".filesUpload").on("change", function() {
var files = $(".filesUpload").prop("files");
var names = $.map(files, function(val) {
return val.name;
});
totalFiles = names.length;
$("#uploadBar").modal('show');
});
$("#uploadBar").on("shown.bs.modal", function() {
var time = totalFiles * 2;
var totalTime = time * 1000; // Get seconds, not milliseconds.
$(".progress-bar-success").animate({
width: "+=100%"
}, totalTime);
});
<!-- Modal -->
<div class="modal" id="uploadBar">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
</div>
</div>
</div>
</div>
<form method="post" enctype="multipart/form-data">
<input type="file" name="filesUpload[]" class="filesUpload" multiple="">
</form>