文件上傳進度條

Question

我需要創建一個進度條爲我的形式， 我希望當上提交按鈕，用戶點擊一個進度條出現，並開始使用on Rails和回形針寶石

紅寶石上傳MP3

IM

這裏是我的代碼

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

這是我的嘗試，但沒有工作

它給我的錯誤：

未定義的方法'許可證」爲＃你是什麼意思？打印

和Bitrat沒有顯示

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

Answer 1

Check this link.

下載這個jQuery插件，並使用它。