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

Question

是否可以使用 uploadify 实现单个上传进度条和多个文件上传？

Answer 1

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 - 禁用 uploadify 进度条

.uploadifyQueue {
  display:none;
}

6。删除uploadify.css