Jquery 如何在plupload中添加进度条？

我有以下plupload代码：

var uploader = new plupload.Uploader({
                runtimes : 'html4',
                browse_button : 'pickfiles', // you can pass an id...
                container: document.getElementById('container'), // ... or DOM Element itself
                url : '<?php echo base_url();?>admin/video/post_video',
                flash_swf_url : '../js/Moxie.swf',
                silverlight_xap_url : '../js/Moxie.xap',

                filters : {
                    max_file_size : '300mb',
                    mime_types: [
                        {title : "Video files", extensions : "mp4,mov,3gp,flv,wmv"}
                    ]
                },

                init: {
                    PostInit: function() {
                        document.getElementById('filelist').innerHTML = '';

                        document.getElementById('uploadfiles').onclick = function() {
                            uploader.start();
                            return false;
                        };
                    },

                    FilesAdded: function(up, files) {
                        plupload.each(files, function(file) {
                            document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
                        });
                    },

                    UploadProgress: function(up, file) {
                        document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
                        console.log((up.total.size-up.total.loaded)/up.total.bytesPerSec)
                    },

                    Error: function(up, err) {
                        document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
                    }
                }
            });
            uploader.init();

var uploader=新的plupload.uploader({
运行时：“html4”，
浏览按钮：'pickfiles'，//您可以传递一个id。。。
容器：document.getElementById（'container'）、/…或DOM元素本身
url:'admin/video/post_video'，
flash_swf_url:“../js/Moxie.swf”，
silverlight_xap_url:“../js/Moxie.xap”，
过滤器：{
最大文件大小：“300mb”，
mime_类型：[
{标题：“视频文件”，扩展名：“mp4、mov、3gp、flv、wmv”}
]
},
初始化：{
PostInit:function（）{
document.getElementById（'filelist'）。innerHTML=''；
document.getElementById（'uploadfiles'）。onclick=function（）{
uploader.start（）；
返回false；
};
},
添加文件：函数（向上，文件）{
plupload.each（文件、函数（文件）{
document.getElementById（'filelist'）.innerHTML++='+file.name+'（'+plupload.formatSize（file.size）+'）；
});
},
上载进度：函数（向上，文件）{
document.getElementById（file.id）.getElementsByTagName（'b'）[0]。innerHTML=''+file.percent+“%”；
log（（up.total.size up.total.load）/up.total.bytesPerSec）
},
错误：函数（向上，错误）{
document.getElementById（'console'）.appendChild（document.createTextNode（“\nError#“+err.code+”：“+err.message））；
}
}
});
uploader.init（）；

现在，代码运行良好。但是，我想解决一些问题

文件完成仅显示0%和100%。没有中间百分比 比如25%或者75%。i、 e.百分比逐渐增加

我想添加一个进度条

如何在plupload工作时阻止页面刷新

如何实现这两个目标

1）首先为进度条添加html

<div id="myProgress">
    <div id="myBar"></div>
</div>

#myProgress {
    position: relative;
    width: 100%;
    height: 30px;
    background-color: grey;
}

#myBar {
    position: absolute;
    width: 1%;
    height: 100%;
    background-color: green;
}

3）然后在

UploadProgress

功能中执行以下操作

  UploadProgress: function(up, file) {
      document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
      $('#myBar').css('width', file.percent + '%');                          
  },

UploadProgress:函数（向上，文件）{
document.getElementById（file.id）.getElementsByTagName（'b'）[0]。innerHTML=''+file.percent+“%”；
$（'#myBar'）.css（'width'，file.percent+'%'）；
},

1）首先为进度条添加html

<div id="myProgress">
    <div id="myBar"></div>
</div>

#myProgress {
    position: relative;
    width: 100%;
    height: 30px;
    background-color: grey;
}

#myBar {
    position: absolute;
    width: 1%;
    height: 100%;
    background-color: green;
}

3）然后在

UploadProgress

功能中执行以下操作

  UploadProgress: function(up, file) {
      document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
      $('#myBar').css('width', file.percent + '%');                          
  },

UploadProgress:函数（向上，文件）{
document.getElementById（file.id）.getElementsByTagName（'b'）[0]。innerHTML=''+file.percent+“%”；
$（'#myBar'）.css（'width'，file.percent+'%'）；
},

Change

file.percent

with

up.total.percent

用于总进度Change

file.percent

with

up.total.percent

用于总进度