파일 업로드 진행 바

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> 

감사 편집 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> 

,536,913,632 10

이 내 시도했지만 작동하지

그것은 나에게 오류 제공 :

정의되지 않은 메서드`허가 '#에 대한하셨습니까을?

를 인쇄하고 Bitrat는

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

Answer 1

Check this link.

다운로드이 jQuery 플러그인을 표시되지 않는 그것을 사용합니다.