如何在plupload中添加进度条？

Question

我有以下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(); 

，代码工作正常。不过，我想解决一些问题。

1. 该文件完成只显示0％和100％。没有中间百分比 ，比如25％，或75％。即百分比逐渐增加。
2. 我想添加一个进度条。
3. 如何在plupload工作时停止刷新页面？

我该如何做到这两点？

Answer 1

1）首先添加HTML为进度条

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

2）然后，对于进度条添加CSS

#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 + '%');       
    },