Uploadify - один индикатор для нескольких загрузок - PullRequest
Новая
       8

Uploadify - один индикатор для нескольких загрузок

2 голосов
/ 26 марта 2011

Возможно ли иметь один индикатор загрузки с несколькими загрузками файлов с помощью uploadify?

Ответы [ 2 ]

2 голосов
/ 04 апреля 2012

Рабочее решение для приложения Rails 3.1.

Это один индикатор выполнения для нескольких загрузок, но ... я использовал jQuery.animate (), так что ... он не совсем беглый индикатор выполнения. Это «прыгает».

1. Загрузить init 

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

0 голосов
/ 05 апреля 2011

Вы можете получить общее количество байтов и разделить на загруженные байты. 

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