使用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，因为它只能用于服务器端... 有什么想法? :)

- Cristiano

---

有一些方法，但不跨浏览器，因为它们使用HTML5的文件API（参见http://kellishaver.tumblr.com/post/21428272282/using-the-file-api-to-preview-images-before-uploading） - Cristian Bica

@bcd - 谢谢！那个有效！ - Cristiano

Answer 1

如果您正在使用Bootstrap 3，可以在此处找到一个非常棒的扩展程序： http://jasny.github.io/bootstrap/javascript/#fileinput。

- Max

Answer 2

我在编程中发现使用Transloadit非常成功：https://transloadit.com/，并在成功调用时将其移交给Carrierwave。还有一个Transloadit gem可以使事情变得更加容易：https://github.com/transloadit/rails-sdk。使用这种方法将为您提供预览、模态、加载栏和许多其他选项，您可以打开或关闭以获得出色的用户体验。它具有与carrierwave相同的调整大小或裁剪选项，或者您可以将其移交给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();
    }
  });
}

- Chris Barretto