我有一个使用 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();
}
但是,当我在文件浏览器中选择文件并选择打开
时,它不会提交表单。任何帮助将不胜感激。
最佳答案
您可以更好地将您的 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 %>
关于javascript - 如何使用 JS 和 Ruby on Rails 提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34820802/