3

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

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

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

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

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

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

谢谢你

4

3 回答 3

1

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

于 2012-05-29T10:35:34.133 回答
1

I have encountered this issue with hiding the input element and putting a label instead.

For eliminating submit button, I have added onchange method.

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

PS: I'm using bootstrap class here, styles can be used instead for hiding the element.

于 2021-07-22T14:52:27.010 回答
0

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

于 2012-05-29T10:49:55.013 回答