Uploadify - 多个上传的单个进度条

Question

使用uploadify可以有一个上传多个文件的上传进度条吗？

Answer 1

Rails 3.1 应用程序的工作解决方案。

它是用于多次上传的单个进度条，但是...我使用了 jQuery.animate() 所以...它不是完全流畅的进度条。它“跳跃”。

1。上传初始化

          $('#album_piece_images').uploadify({
            'uploader' : '/assets/uploadify.swf',
            'script' : url,
            'fileDataName' : 'piece[image]',
            'fileExt' : '*.png;*.jpeg;*.jpg;*.gif',
            'cancelImg' : '/assets/cancel.png',
            'multi' : true,
            'scriptData' : upload_params,
            'auto' : true,
            'onOpen': function(event, ID, fileObj) {
              $(".bar_container.rounded_bar_container_tiny.container_tiny").removeClass("hide");
            },  
            'onSelect': function(event, ID, fileObj) {
              totalSize += fileObj.size;
            },  
            'onComplete'  : function(event, ID, fileObj, response, data) {
              bytesUpload += fileObj.size;
              $("#uploaded_images").append('<input type="hidden" value="' + response + '" name="album[piece_ids][]">');
            },  
            'onProgress': function(event, ID, fileObj, data) {
              var progress = (((data.bytesLoaded + bytesUpload) / totalSize) * 100) + "%";
              $(".progress").animate({
                'width': progress
              }, 250);
            },  
            'onAllComplete' : function(event,data) {
              $("#new_album").submit();
            }   
          }); 

2。下载进度条的这个css并将它们放在你的样式表目录中

https://github.com/jsullivan/CSS3-Progress-bars

https://raw.github.com/jsullivan/CSS3-Progress-bars/master/css3-progress-bar.css

3。查看 (HAML!) 以获取我们附加 Uploadify 的表单

  = form_for @album, url: albums_path, method: :post, html: { class: "alt normal-upload", data: { :"session-cookie-key" => Rails.application.config.session_options[:key], :"session-cookie-value" => cookies[Rails.application.config.session_options[:key]], :"url" => pieces_path } } do |f|
    %fieldset
      .row
        .field
          = f.label :album_id, "Name of album"
          = f.text_field :name

      #uploaded_images

      .bar_container.rounded_bar_container_tiny.container_tiny.hide
        .bar_mortice.rounded_tiny.mortice_tiny
          .progress.rounded_tiny.progress_tiny

      .submit
        = f.file_field :piece_images, multiple: true

4。隐藏类的 CSS

.hide {
  position: absolute;
  top: -999em;
  left: -999em;
  margin: 0;
  padding: 0;
}

5。 CSS - 禁用上传进度条

.uploadifyQueue {
  display:none;
}

6。删除uploadify.css

Answer 2

您可以获取总字节数并除以上传的字节数。

    var totalSize = 0;
var bytesUpload=0;

$('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'removeCompleted' : false,
      'onselect'    : function(event,ID,fileObj) {
        totalSize = fileObj.size;
        },
        'onComplete'  : function(event, ID, fileObj, response, data) {
            bytesUpload += fileObj.size;
        },
      'onProgress'  : function(event,ID,fileObj,data) {
          var progress = (data.bytesLoaded+bytesUpload)/totalSize;
          //Set progress bar to progress...
        }
});