简体   繁体   English

如何在plupload中添加进度条?

[英]How to add progress bar in plupload?

I have the following plupload code: 我有以下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();

Now, the code works fine. 现在,代码工作正常。 However, there are some issues which I want to fix. 但是,我想解决一些问题。

  1. The file complete shows only 0% and 100%. 文件完成仅显示0%和100%。 No intermediate percentage like 25%, or 75%. 没有中间百分比,如25%,或75%。 ie the percentage gradually increasing. 即百分比逐渐增加。
  2. I want to add a progress bar. 我想添加一个进度条。
  3. How to stop the page getting refreshed while plupload is working? 如何在plupload工作时停止页面刷新?

How can I achieve these two? 我怎样才能实现这两个目标?

1) First add html for progress bar 1)首先为进度条添加html

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

2) Then add css for progress bar 2)然后为进度条添加css

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

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

3) Then in UploadProgress function do like this 3)然后在UploadProgress函数中这样做

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM