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

在您的第一个代码段中，您绑定了表单上的提交功能，我假设其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 + '%');
        },
    });
});

Rails + Carrierwave + Jquery Fileupload +简单形式

1 个答案: