Rails：在提交文件表单后执行JavaScript

Question

我几天来一直在努力。我需要能够在提交文件表单后执行JavaScript代码，以便我可以对该文件执行某些操作。

这些是我已经尝试过的方法：

1）通过控制器的动作

调用js.erb文件

routes.rb中：

post 'workflows/:id/upload', to: 'workflows#upload_files', as: 'workflows_upload_files', defaults: { :format => 'js' }

控制器（空）：

def upload_files
end

upload_files.js.erb：

console.log('Some log');

形式：

<%= form_for(:printing_file, remote: true, html: { id: 'upload-form'}, url: workspace_workflows_upload_files_path(@workspace, workflow)) do |f| %>
  <%= f.file_field :file, multiple: true, name: 'workflow[printing_files][]', class: "printing-file-upload-field", onchange: "this.form.submit()" %>
<% end %>

我不知道为什么，但这会产生跨源错误。当我解决它添加protect_from_forgery except: :upload_files时，js代码将呈现为纯文本但未进行评估。

我尝试在application.js上添加此代码，但它没有用（this question上提出的解决方案）：

 $.ajaxSetup({  
    'beforeSend': function (xhr) {xhr.setRequestHeader('Content-Type', 'application/javascript');}  
 });

2）处理输入字段更改事件

我也尝试了this answer上的解决方案：

$(".printing-file-upload-field").change(function(){
  console.log(this.files);
});

结果：事件被触发，但我只有undefined。

3）处理表单完成事件

我也试过this answer。

$("#upload-form").bind('ajax:complete', function() {
  console.log('The form was submitted!');
});

结果：事件未被触发。

Answer 1

你能尝试从form_for中删除remote：true吗？ http://guides.rubyonrails.org/form_helpers.html#dealing-with-ajax

Answer 2

最后我使用了第二个选项的变体：处理输入字段更改事件。

问题是我提交了表单，所以我更改了onchange='this.form.submit()' onchange='readInputFile(this)'并且它有效。然后我添加了这段代码来操作文件：

readInputFile = function(input_file_field) {
    if (input_file_field.files && input_file_field.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            doSomethingWithTheFile(e.target.result);
        }
        reader.readAsDataURL(input_file_field.files[0]);
    }
}

我还发现，在第3个选项中，事件未被触发，因为当您提交表单时不会触发事件＆＃34;手动＆＃34;与this.form.submit()。

希望这有助于某人！