Question

I have downloaded 1 upload progress bar from here: http://www.malsup.com/jquery/form/progress3.html

It’s perfect; anyway, just when the file is uploaded it gives a status about file, like:

file uploaded in http://mysite.com/1.jpg

However, when a new file is uploaded, the status disappears and details about the new file that has just been uploaded come up.

I want to just have the old status and when a new file is uploaded, the new status just comes up under the old status. How could I do this?

Here’s the code:

(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
beforeSend: function() {
    status.empty();
    var percentVal = '0%';
    bar.width(percentVal)
    percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    bar.width(percentVal)
    percent.html(percentVal);
    //console.log(percentVal, position, total);
},
complete: function(xhr) {
    status.html(xhr.responseText);
}
}); 

})();       
</script>

If you see the demo in the link and understand it well, the status appears inside the HTML that looks like:

 <div id="status"></div>

Thank you!

Answer 1

Your complete callback is resetting status.html(), AND your beforeSend is emptying status with status.empty();. Remove that line!

Then try prepending the newest message wrapped in some markup, rather than overwriting the entire contents of status:

complete: function(xhr) {
    var message = '<div class="new">' + xhr.responseText + '</div>';
    status.prepend(message);
}