Wie Fortschrittsbalken in plupload hinzuzufügen?

Question

Ich habe folgendes Plupload Code:

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(); 

Nun funktioniert der Code in Ordnung. Es gibt jedoch einige Probleme, die ich beheben möchte.

1. Die Datei vollständig zeigt nur 0% und 100%. Kein mittlerer Prozentsatz wie 25% oder 75%. d.h. der Prozentsatz steigt allmählich an.
2. Ich möchte eine Fortschrittsanzeige hinzufügen.
3. Wie kann ich verhindern, dass die Seite aktualisiert wird, während plupload funktioniert?

Wie kann ich diese beiden erreichen?

Answer 1

1) erste HTML-Fortschritts bar

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

2) hinzufügen Dann CSS hinzu Fortschrittsbalken

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

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

3) dann in UploadProgress Funktion wie dies tun

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