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

现在，代码工作正常。但是，我想解决一些问题。

文件完整仅显示0％和100％。没有中间百分比像25％，或75％。即百分比逐渐增加。
我想添加一个进度条。
如何在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 + '%');                          
  },

如何在plupload中添加进度条？

1 个答案: