ich brauche einen Fortschrittsbalken für meine Form zu schaffen, ich will, wenn der Klick Benutzer auf Submit-Button wird eine Statusleiste angezeigt und starten Sie das mp3Datei-Upload-Fortschrittsbalken
im Upload Rubin mit auf Schienen und Büroklammer gem
hier ist mein Code
<% 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>
dank 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>
das ist mein Versuch ist aber nicht funktioniert
es gib mir Fehler:
nicht definierte Methode `Erlaubnis‘ für # Meinten Sie? drucken
und der Bitrat zeigt nicht
http://img3.stooorage.com/images/669/20501499_screenshot-14--2016-west-08-02-14.png
Diese Frage wurde gestellt und beantwortet http://stackoverflow.com/questions/5907898/file-upload-progress-bar-with-paperclip-on-heroku – Okomikeruko
Ich habe versucht, aber ich bin wirklich nicht gut mit Javascript so funktioniert nicht – anouar
können Sie mir mit meinem Code helfen – anouar