First, thanks in advance for any advice. I've looked everywhere for a solution and can't find anything. Admittedly, Javascript isn't my strong suit.
I'm using fineuploader to upload files, one-by-one and using jQuery knob to display the upload progress. The knob is for upload progress updates only and shouldn't be interactive. I can style it, set the size completion % of the knob, etc. but I cannot get it to display the upload % in the middle.
Here's my code.
}).on('upload', function(event, id, name) {
var progressField = $('#' + 'pic' + (id + 1)).parent();
progressField = progressField.parent();
var picName = $(progressField).children('label:first').html();
$(progressField).attr("class", "uploaderBox");
$(progressField).html('');
$('.uploaderBox').html('<span class="picName">Uploading ' + picName + '...</span>');
$(progressField).append('<div id="progressKnob"></div>');
$("#progressKnob").knob({
"displayInput": true,
"thickness": .15,
"width": 70,
"fgColor": "#FF00FF",
"inputColor": "#000000"
});
}).on('progress', function(extra, id, name, uploadedBytes, totalBytes){
var currentProgress = Math.round((uploadedBytes / totalBytes) * 100);
$('#progressKnob')
.val(currentProgress)
.trigger('change');
}).on('complete', function(event, id, name, responseJSON){
$('#progressKnob')
.val(100)
.trigger('change');