3

音声ファイルをアップロードするための簡単なフォームを作りたいです。また、ユーザーがファイルを送信したときに、ファイルのアップロードの進行状況バーを表示したいと考えています。一度に 1 つのファイルのみを送信したい。

私の _upload.html.erb:

<%= form_for Sound.new do |f| %>
    <%= f.file_field :fichier, name: 'sound[fichier]', :required => true %><br />
    <%= f.text_field :title, :placeholder => 'Titre', :size => 10, :required => true %><br />
    <%= f.submit 'Envoyer' %>
<%end%>
<div class="progress"><div class="bar" style="width: 0%;"></div></div>

私のJsファイル：

$('#new_sound').submit(function() {
    $('#new_sound').fileupload({
        dataType: 'json',
        progress: function (e, data){
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.bar').css('width', progress + '%');
        },
    });
});

編集：（質問を忘れたことに気づきました）実際には、それは実際には質問ではなく、なぜ機能しなかったのかわかりません。このjsを使用すると、機能しますが、ファイルがアップロードされる前にユーザーが送信するまで待ちたいです。

$(function () {
    $('#new_sound').fileupload({
        dataType: 'json',
        add: function (e, data){
            data.submit();
        },
        progress: function (e, data){
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.bar').css('width', progress + '%');
        },
    });
});
4

1 に答える 1

0

最初のスニペットでは、#new-sound の ID を持っていると想定しているフォームに送信機能をバインドしています。

それを反映するように 2 番目のスニペットを更新します。このように見えるはずです。

$('#new_sound').submit(function() {
    $('#new_sound').fileupload({
        dataType: 'json',
        add: function (e, data){
            data.submit();
        },
        progress: function (e, data){
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.bar').css('width', progress + '%');
        },
    });
});
于 2014-12-14T17:44:09.613 に答える