使用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

Answer 2

我在使用Transloadit时发现了很多成功： https ：//transloadit.com/并在成功通话时将其交给Carrierwave。 还有一个transloadit gem可以让事情更容易： https ： //github.com/transloadit/rails-sdk 。 使用此方法将为您提供预览，模态，加载栏以及一系列其他选项，您可以打开或关闭这些选项以获得出色的用户体验。 它具有相同的选项，用于调整载波的大小或裁剪，或者您可以将其交给carrierwave来为您完成。 您对控制器的jquery回调可能类似于：

updateAttachment：function（fileName，attachmentType）{var self = this;

  $.ajax({
    type: "PUT",
    url: <your update url>,
    data: {
      attachment: {
        file: fileName
      }
    },
    success: function() {
      location = self.windowLocation();
    },
    error: function() {
      self.showError("Error uploading file.");
      location = self.windowLocation();
    }
  });
}