上传图像而不显示file_field和“apply”按钮。什么是正确的方法?

时间:2012-05-29 10:26:26

标签: ruby-on-rails ruby-on-rails-3

我在rails 3.2应用程序中工作,用户拥有头像图片。

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

我希望改善用户体验,删除视图中的字段和按钮。这应该是这样的:

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

没有(可见)字段,没有“应用”按钮

最好的方法是什么? 我应该继续在视图中使用file_field但是隐藏它并使用一些javascript代码触发用户#update动作吗?或者还有其他更好的方法吗?

谢谢

3 个答案:

答案 0 :(得分:1)

您可以使用其中一个js插件上传文件。即如果您使用的是jQuery,可以尝试使用plupload

答案 1 :(得分:1)

我在隐藏输入元素并放置标签时遇到了这个问题。

为了消除提交按钮,我添加了 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:我在这里使用引导类,可以使用样式来代替隐藏元素。

答案 2 :(得分:0)

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