javascript - 如何使用 JS 和 Ruby on Rails 提交表单

Question

我有一个使用 refile gem 来处理文件上传的 Rails 项目，我想在用户在文件浏览器中选择文件后提交一个表单。

我在 Rails 应用程序的导航栏中创建了一个按钮，并具有以下形式。

_nav.html.erb

<div class='upload-image'>
          <form name="form_upload_image">
          <p>Upload Image <i class="fa fa-upload"></i></p>
        <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |form| %>

              <%= form.attachment_field :tshirt_image, direct: true, class: "fa fa-upload", input_html: { hidden: true, onchange: "uploadImage()" } %>

          <%= form.submit "Update", class: "btn btn-primary" %>

        <% end %> <!-- form -->
      </form>
        </div>

我想在用户在文件浏览器中选择Open按钮后调用uploadImage JS函数。

我在 app/assets/javascripts 中创建了一个 navbar_image_upload.js 文件，如下所示，

// app/assets/javascripts/navbar_image_upload.js

function uploadImage() {
  document.forms["form_upload_image"].submit();
}

但是，当我在文件浏览器中选择文件并选择打开时，它不会提交表单。任何帮助将不胜感激。

Answer 1

您可以更好地将您的 change 方法与 unobtrusive pattern 绑定(bind)起来。 ，因为使用内联 JS 几乎肯定会导致委托(delegate)等问题:

#app/assets/javascripts/application.js
$(document).on("change", "input.fa-upload", function(e){
    $(this).parents('form').submit();
});

您还最好使用正确的表单格式:

<%= content_tag :div, class: 'upload-image' do %>
    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |form| %>
        <%= form.attachment_field :tshirt_image, direct: true, class: "fa fa-upload", input_html: { hidden: true } %>
        <%= form.submit "Update", class: "btn btn-primary" %>
    <% end %>
<% end %>