Rails + Carrierwave + Jquery Fileupload + 简单表格

Question

我想制作一个简单的表单来上传音频文件。我想在用户提交文件时显示文件上传的进度条。我只想一次提交一个文件。

我的_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 + '%');
        },
    });
});

Answer 1

在您的第一个 sn-p 中，您将在表单上绑定提交函数，我假设该函数的 id 为 #new-sound。

更新您的第二个 sn-p 以反映这一点。应该看起来像这样。

$('#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 + '%');
        },
    });
});