Jquery Uploadify-用于多次上载的单个进度条

是否可以使用uploadify将单个上载进度条与多个文件上载一起使用？

您可以获得总字节数并除以上载的字节数

    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...
        }
});

---

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

它是一个用于多次上传的进度条，但是。。。我使用了jQuery.animate（）所以。。。它不是非常流畅的进度条。它“跳跃”

1.上传初始化 4.隐藏类的CSS 5.CSS-禁用上载进度条 6.删除

uploadify.css

          $('#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();
            }   
          }); 

  = 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

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

.uploadifyQueue {
  display:none;
}