使用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 宝石可以让事情变得更加容易：https://github.com/transloadit/rails-sdk。使用此方法将为您提供预览，模式，加载栏以及一系列其他选项，您可以打开或关闭以获得出色的用户体验。它具有与载波相同的大小调整或裁剪选项，或者您可以将其交给载波为您完成。对控制器的 jquery 回调可能如下所示：

updateAttachment： function（文件名， 附件类型） { 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();
    }
  });
}