Question

我需要为表单创建一个进度条，我想当用户点击提交按钮时出现一个进度条并开始上传mp3

我在rails和paperclip gem上使用ruby

这是我的代码

<% provide(:title, "Upload") %>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@song, url: upload_path ) do |f| %>
      <%= render 'shared/error_messages', object: f.object %>

      <%= f.label :title, t('song.title') %>
      <%= f.text_field :title, class: 'form-control', required: true  %>

      <%= f.label :artist, t('song.artist') %>
      <%= f.collection_select :artist_id, @artists, :id, :name, {prompt: "Select a Artist"}, {class: "form-control selectpicker", "data-live-search" => "true", "required" => "true" }  %>

      <%= f.label :mp3, t('song.mp3') %>
      <%= f.file_field :mp3 %>

      </br>

      <%= f.submit t('song.submit'), class: "btn btn-primary", data: { disable_with: 'Uploading'} %>
    <% end %>
  </div>
</div>

感谢编辑1：

<% provide(:title, "Upload") %>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(@song, url: upload_path ) do |f| %>
      <%= render 'shared/error_messages', object: f.object %>

      <%= f.label :title, t('song.title') %>
      <%= f.text_field :title, class: 'form-control', required: true  %>

      <%= f.label :artist, t('song.artist') %>
      <%= f.collection_select :artist_id, @artists, :id, :name, {prompt: "Select a Artist"}, {class: "form-control selectpicker", "data-live-search" => "true", "required" => "true" }  %>

      <%= f.label :mp3, t('song.mp3') %>
        <%= f.file_field :mp3, required: true, multiple: true, name: 'song' %>

<div class="progress-wrapper">
  <p>Bitrate: <span class="bitrate"></span></p>
  <div class="progress">
    <div class="progress-bar" role="progressbar">
      0%
    </div>
  </div>
</div>

      </br>

      <%= f.submit t('song.submit'), class: "btn btn-primary", data: { disable_with: 'Uploading'} %>
    <% end %>
  </div>
</div>


<script>
  $(document).ready(function() {
    var upload = $('#new_song');
    var wrapper = upload.find('.progress-wrapper');
    var progress_bar = wrapper.find('.progress-bar');
    var bitrate = wrapper.find('.bitrate');

    upload.fileupload({
      dataType: 'script',
      add: function (e, data) {
        types = /(\.|\/)(mp3)$/i;
        file = data.files[0];
        if (types.test(file.type) || types.test(file.name)) {
          data.submit();
        }
        else { alert(file.name + " must be mp3 file"); }
      }
    });



    upload.on('fileuploadstart', function() {
      wrapper.show();
    });

    upload.on('fileuploaddone', function() {
      wrapper.hide();
      progress_bar.width(0); // Revert progress bar's width back to 0 for future uploads
    });

    upload.on('fileuploadprogressall', function (e, data) {
      bitrate.text((data.bitrate / 1024).toFixed(2) + 'Kb/s');

      var progress = parseInt(data.loaded / data.total * 100, 10);
      progress_bar.css('width', progress + '%').text(progress + '%');
    });
  });
</script>

这是我的尝试，但没有工作

它给我错误：

未定义的方法`permit＆＃39;为＃你的意思？打印

并且Bitrat没有显示

http://img3.stooorage.com/images/669/20501499_screenshot-14--2016-west-08-02-14.png

Answer 1

Check this link.

下载此Jquery插件并使用它。

文件上传进度条

1 个答案: