上传图片而不显示 file_field 和“应用”按钮。正确的方法是什么？答案

【问题标题】：Upload an image without displaying file_field and "apply" button. What's the correct way?上传图片而不显示 file_field 和“应用”按钮。正确的方法是什么？
【发布时间】：2012-05-29 10:26:26
【问题描述】：

我正在使用 rails 3.2 应用程序，其中用户拥有头像图片。

用户可以通过以下方式选择他的头像： 1）在编辑用户视图中单击“浏览...”按钮选择文件（使用file_field） 2）选择文件并单击确定 3）然后单击“应用照片”按钮（在包含文件名的字段的右侧）将图像加载到服务器并更新视图

我想改善用户体验，删除视图中的字段和按钮。应该是这样的：

1) 点击链接“更新头像”（或直接点击图片） 2) 选择文件并点击确定

没有（可见）字段，也没有应用按钮

最好的方法是什么？我应该继续在视图中使用 file_field 但隐藏它并使用一些 javascript 代码触发 user#update 操作吗？还是有其他更好的方法来做到这一点？

谢谢

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3

【解决方案1】：

您可以使用其中一个 js 插件来上传文件。 IE。如果你使用 jQuery，你可以尝试使用plupload

【讨论】：

感谢Eru，我知道有很多关于上传的插件，但我不需要异步上传或复杂的想法，只是为了隐藏字段和应用按钮
您可以隐藏该字段，将点击事件绑定到将在该字段上触发点击事件的按钮。接下来需要做的就是在字段上绑定一个change事件，用js提交表单。
+1！我找到了一个很好的解释，或多或少地说明了您在评论中所说的话。重点是：使用不透明度隐藏字段，因此可以与之交互：stackoverflow.com/questions/3173453/…
您链接的解决方案的问题是，如果该文件在内容区域的某处被 opacity 属性隐藏，当您错误地单击它时，它会弹出一个浏览窗口。对事件进行操作会阻止您这样做。然后你可以隐藏它，或者（对于旧浏览器更好）让它可见，位置：绝对和左边：-999em 所以它总是远离内容。

【解决方案2】：

我遇到了隐藏输入元素并改为放置标签的问题。

为了消除提交按钮，我添加了onchange方法。

<%= file_field_tag :file, class: "d-none", onchange: "this.form.submit()" %>
<%= label_tag :file, role: "button" do %>
  <%= image_pack_tag('logo.svg') %>
<% end %>

PS：我这里使用的是引导类，可以使用样式来代替隐藏元素。

【讨论】：

【解决方案3】：

上传字段附近的按钮由浏览器生成，是浏览器的标准小部件。您可以为此使用 js 插件或实现 iframe 上传方法（即使在 IE 上也允许您异步文件上传）。 iframe 的简单教程 - there iframe 方法允许您根据需要自定义上传链接/字段 =)

【讨论】：