javascript - 使用 Carrierwave 上传前预览图像

Question

我有一个表单，用户可以在其中创建新图片。我已经用 Carrierwave 成功地做到了。我想知道是否可以在上传前在浏览器中预览选定的图像？我发现了一些使用 javascript 的尝试，但对我没有用。

这是使用 CARRIERWAVE 上传图片的代码:

<%= form_for @photo, :html => {:multipart => true} do |f| %>

  <%= f.file_field :image %>

  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>

  <div class="field">
    <%= f.label :description %><br>
    <%= f.text_area :description %>
  </div>

  <div class="actions">
    <%= f.submit "Save Photo" %>
  </div>
<% end %>

我的目标是拥有一张图片的小缩略图，以便用户可以在上传前看到它。我猜我不能在这里使用 Rails，因为它可能只用于服务器端...

有什么想法吗？ :)

Answer 1

如果您使用的是 bootstrap 3，这里有一个很棒的扩展 http://jasny.github.io/bootstrap/javascript/#fileinput