进度条并在达到100%时显示消息

时间:2015-06-20 18:18:04

标签: javascript php jquery ajax progress-bar

我的JS进度条中有以下脚本,我希望它能显示“#34;处理..."当它达到100%时....我该怎么做?

进度条演示网址为:http://demo.w3bees.com/file-upload-with-progress/

进度条Java脚本....

$(document).ready(function() {
    /* variables */
    var preview = $('img');
    var status = $('.status');
    var percent = $('.percent');
    var bar = $('.bar');

    /* only for image preview */
    $("#image").change(function(){
        preview.fadeOut();

        /* html FileRender Api */
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("image").files[0]);

        oFReader.onload = function (oFREvent) {
            preview.attr('src', oFREvent.target.result).fadeIn();
        };
    });

    /* submit form with ajax request */
    $('form').ajaxForm({

        /* set data type json */
        dataType:  'json',

        /* reset before submitting */
        beforeSend: function() {
            status.fadeOut();
            bar.width('0%');
            percent.html('0%');
        },

        /* progress bar call back*/
        uploadProgress: function(event, position, total, percentComplete) {
            var pVel = percentComplete + '%';
            bar.width(pVel);
            percent.html(pVel);
        },

        /* complete call back */
        complete: function(data) {
            preview.fadeOut(800);
            status.html(data.responseJSON.status).fadeIn();
        }

    });
});

1 个答案:

答案 0 :(得分:0)

我发现我错过了在控制器页面添加品牌ID检索。