Multible upload progress bars

This tutorial shows how to make multiple uploading progress bars, inspired by Pretty Printed video, on how to make the progress bar. In my case I needed it to be multible for more then one input file types. So I came up with a solution. I don’t know if this is the best solution but it works. get it and make it better for yourself.

(I recommend to watch the video first and then see what has changed to my js code)

or use https://github.com/blueimp/jQuery-File-Upload/wiki/Setup

Here we have 3 input types and a submit button:

[code]

0%

0%


0%

[/code]

Then we have the Javascript file:

[code]

$(document).ready(function() {

var inputArr = [];

$(‘.file-input’).each(function (){
console.log(‘each’);
$(this).change(function() {

inputArr.push($(this).attr(‘id’));
console.log(inputArr);
$(this)
});
});
console.log(inputArr);
$(‘form’).on(‘submit’, function(event) {
event.preventDefault();
var formData = new FormData($(‘form’)[0]);
$.ajax({
xhr : function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener(‘progress’, function(e) {
if (e.lengthComputable) {
console.log(‘Bytes Loaded: ‘ + e.loaded);
console.log(‘Total Size: ‘ + e.total);
console.log(‘Percentage Uploaded: ‘ + (e.loaded / e.total))

var percent = Math.round((e.loaded / e.total) * 100);
// var files = $(“#document1”).val();
$.each(inputArr, function (index, value){
$(‘#’+value+’-progressbar’).attr(‘aria-valuenow’, percent).css(‘width’, percent + ‘%’).text(percent + ‘%’);
});
}
});

return xhr;
},
type : ‘POST’,
url : ‘/upload’,
data : formData,
processData : false,
contentType : false,
success : function() {
alert(‘File uploaded!’);
}
});

});

});

[/code]

the js works in that way that, at the begging you have an each loop which gets the inputs from a class then provices the progress bars with the right id so in this case the progress bar has an id of the value wich in this cas is “document1, 2, and 3″and added to it “-progressbar”

CategoriesUncategorized

Leave a Reply

Your email address will not be published.