Rails - 使用 Javascript/HTML 上传文件

Question

我正在尝试上传文件并将其解析为 rails。我还想将文件的内容放在可排序的表中。我关注了http://railscasts.com/episodes/396-importing-csv-and-excel?autoplay=true 并通过了它。

我的视图文件 - index.html.erb 看起来像这样 -

<%= form_tag import_users_path, multipart: true do %>
Import a file
<%= file_field_tag :file %>
<%= submit_tag "Submit" %>
<% end %>

*_controllers.rb 看起来像这样

class UsersController < ApplicationController
 def index
  @users = User.order(params[:sort])
 end 

 def show
  @user = User.find(params[:id])
 end

 def import
  User.import(params[:file])
  redirect_to action: 'index'
 end
end

现在我想使用 Javascript/Bootstrap 为文件上传按钮添加样式。我将 index.html.erb 更改为以下内容 -

<%= form_tag import_users_path, multipart: true do %>
<span class="fileUpload btn btn-primary"> Upload
    <input id="uploadBtn" type="file" class="upload" />
</span>
<%= submit_tag "Submit">
<% end %>

现在 assets/javascripts/*.js 看起来像这样 -

document.getElementById("uploadBtn").onchange = function() {
document.getElementById("uploadFile").value = this.value;
};

这不起作用，因为上传的文件没有被解析为 ':file' 没有分配任何东西。

如何将 CSS 和 javascript 样式应用于“file_field_tag”？

Answer 1

1. 您应该能够将 css 样式添加到标签中，就像您可以用于表单助手一样：

   file_field_tag :file, class: 'whatever-class'

2. 在使用您的手写文件输入时，我认为您没有在控制器中获得值，因为您没有命名您的字段，修复应该很简单：

   <input id="uploadBtn" type="file" class="upload" name='file' />

3. 我知道您可以通过 AJAX/JS 上传文件，但我认为该过程并不那么简单，因为我认为您需要使用 FormData 和其他类似的东西进行一些自定义表单序列化那。不过我并不完全相信我是对的！