以简单的形式和载波自定义图像上传字段

Question

我一直在努力在Rails应用程序中自定义用于图像上传（载波）的简单表单字段。

Current design:

Desired result

我所做的是检查由简单表单助手创建的HTML：

val result: RDD[Iterable[(Int, Int)]] = rdd.groupBy { case (_, k) => k / 2 }.values

result.foreach(println)
// CompactBuffer((0,0), (0,0), (0,1), (1,1))
// CompactBuffer((0,2), (0,3), (1,2), (1,3)

添加样式，删除不必要的字段和图标，从而导致：

<%= f.input :photo %>
<%= f.input :photo_cache, as: :hidden %>

按钮正常工作-我可以选择图片，名称标签显示为所选的img名称。但是，当我尝试提交表单时，出现错误，图像不能为空。

我在这里想念什么？

Answer 1

我建议使用Jasny gem中包含的图片上传小部件：http://www.jasny.net/bootstrap/javascript/

并自定义输入，如用户照片：

 <div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
  <div>
    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
     <input type="file" name="user[photo]" id="user_photo">
    </span>
    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>

您可以随意自定义css，使其像我一样：

它正在我的项目上。