如何在Jquery fileupload中动态更改模板

Question

我在jQuery中完成了一个脚本，允许多个文件上传到图库。除了进度条，一切正常。问题是它有两种颜色黄色 - 上传（添加）时，绿色 - 上传（完成） - 文件上传（完成）后应变为绿色，此时它会自动将所有图片状态更改为绿色第一个文件已成功上传。任何人都可以看看代码，并给我一些建议是什么问题？ 提前感谢任何建议。

$(function(){
    var ul = $('#upload ul');

    $('#drop a').click(function(){
        // Simulate a click on the file input button
        // to show the file browser dialog
        $(this).parent().find('input').click();
    });

    // Initialize the jQuery File Upload plugin
    $('#upload').fileupload({
        // This element will accept file drag/drop uploading
        // dropZone: $('#drop'),
        // This function is called when a file is added to the queue;
        // either via the browse button, or via drag/drop:
        dataType: "json",
        url: "upload.php",
        limitConcurrentUploads: 1,
        maxNumberOfFiles: 1,
        sequentialUploads: true,
        bitrateInterval: 1000,

        add: function (e, data) {
            var tpl = $('<div class="upload_progress" style="padding: 20px 0px; margin-bottom: 20px;"><div style="float: left;"><img src="http://www.koga-kotwica.rcez.pl/admin/images/empty.jpg"></div><div><span></span><p></p><div class="progress progress-bar-striped active"><div class="progress-bar" style="width: 0%;"></div></div></div></div>');
            // Add the HTML to the UL element
            data.context = tpl.appendTo(".upload_photo");
            // Automatically upload the file once it is added to the queue
            var jqXHR = data.submit();
        },
        progress: function(e, data){
            // Calculate the completion percentage of the upload
            var progress = parseInt(data.loaded / data.total * 100, 10);
            data.context.find('.progress-bar').width(progress +'%');
            console.log(data.bitrate);
        },
        done:function(e, data){
            $.each(data.files, function (index, file) {
                // Append the file name and file size
                //data.context.find('.progress-bar').width('0%');
                $('.upload_progress').removeClass('upload_progress').addClass('upload_done');
                data.context.find('.progress').css("display","none");
                //data.context.find('.progress').toggleClass("progress-bar-success");
                data.context.find('p').text("Plik został przesłany poprawnie !!!");
                data.context.find('span').text("Nazwa pliku: " + data.files[0].name + " ") 
                     .append('</br> Rozmiar: ' + formatFileSize(data.files[0].size));
                data.context.find('img').attr("src", "photos/"+data.files[0].name).css(
                    {'width' : '130px', 'padding': '0px 10px'}
                ); 
            });
        },
        fail:function(e, data){
            // Something has gone wrong!
            data.context.addClass('error');
        }
    });

    // Prevent the default action when a file is dropped on the window
    $(document).on('drop dragover', function (e) {
        e.preventDefault();
    });

    // Helper function that formats the file sizes
    function formatFileSize(bytes) {
        if (typeof bytes !== 'number') {
            return '';
        }
        if (bytes >= 1000000000) {
            return (bytes / 1000000000).toFixed(2) + ' GB';
        }
        if (bytes >= 1000000) {
            return (bytes / 1000000).toFixed(2) + ' MB';
        }
        return (bytes / 1000).toFixed(2) + ' KB';
    }
});