Question

我正在尝试制作一个包含标题，电子邮件，内容和文件上传字段的表单。当用户单击“提交”时，上传的文件将保存在数据库中，并且具有位置和散列名称的链接将发送给管理员。这一切都有效，但用户上传的文件很大，我想有一些加载栏。我知道stackoverflow上有很多类似的问题，但我无法使它工作。首先，我设置了两条路线：

获取“消息”，以：“消息#index”

将“message_create”发布到：“messages＃create”

首先我收到表格：

<%= form_tag(message_create_path, :method=>'post', class: "section form", :multipart => true) do %>

    <fieldset class="form__fieldset">

        <div class="form__field">
            <%= text_field_tag 'name', nil, class: 'input', placeholder: 'Name', id: 'name' %>
        </div>

    <div class="form__field">
        <%= text_field_tag 'email', nil, class: 'input', placeholder: 'Email', id: 'email' %>
    </div>

    <div class="form__field">
        <%= text_area_tag 'content', nil, class: 'input textarea', rows: '10', placeholder: 'content', id: 'content' %>
    </div>

    <div class="form__field">
            <%= file_field_tag 'file', id: 'input_file' %>
    </div>

<div class="progress">
    <div class="bar"></div >
    <div class="js-percent">0%</div >
</div>

    </fieldset>

    <fieldset class="form__fieldset">
        <%= submit_tag 'send', :class => "btn btn--dark-ghost", :id => "submit" %>
    </fieldset>
<%end%>

然后表格应该发布到第二条路线。为了使加载进度可见，我尝试使用它：

$("#submit").click(function() {
        var file_data = $("#input_file").get(0).files[0]
        $.ajax({
            xhr: function()  {
                var xhr = new window.XMLHttpRequest();
                //Upload progress
                xhr.upload.addEventListener("progress", function(evt){
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    $(".js-percent").text(String(percentComplete*100) + "%")
                }
            }, false);
        return xhr;
    },
    url: "message_create",
    type: "POST",
        data: JSON.stringify(file_data),
        contentType: "application/json",
        dataType: "json"
    });
});

当我尝试提交文件时，文本0％joust跳转到100％，但我看到浏览器仍在上传。我无法使它工作，因为我不知道ajax所以请帮我解决这个加载进度问题，如果你能推荐我一些学习Ajax的好教程，我将不胜感激。谢谢！

如何为rails表单创建文件加载进度条？

0 个答案: