файл прогресс загрузки бар

Question

мне нужно создать индикатор для моей формы, я хочу, когда пользователь нажимает на кнопку отправки строка прогресса появляются и начать загрузку в формате MP3

им с помощью рубин на рельсах и скрепка гем

вот мой код

<% 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> 

благодаря Edit 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> 

это моя попытка, но не работает

он дает мне ошибку:

неопределенный метод `разрешение» для # ли вы имеете в виду? печать

и Bitrat не показывая

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

Answer 1

Check this link.

Скачать этот плагин Jquery и использовать его.