Rails + Carrierwave + Jquery Fileupload + simple form （这是一个提问标题，无需回答）

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

- GeorgesLeYeti

---

你使用的是哪个版本的jquery和fileupload？ - Kuldeep

https://github.com/n0ne/Rails-Carrierwave-jQuery-File-Upload - keyvan

嘿，我遇到了相同的问题。你把JS代码片段输入到哪里了？是在表单里吗？ - LizzyTheLearner

Answer 1

在你的第一个片段中，你正在绑定提交函数到你的表单上，我假设它有一个id为#new-sound。

更新你的第二个片段以反映这一点。应该看起来像这样。

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

- christopherdro