使用 Carrierwave 上传前预览图像答案

【问题标题】：Preview image before upload with Carrierwave使用 Carrierwave 上传前预览图像
【发布时间】：2014-03-17 10:43:13
【问题描述】：

我有一个表单，用户可以在其中创建新图片。我已经用 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，因为它可能只用于服务器端......

有什么想法吗？ :)

【问题讨论】：

有一些方法，但不是跨浏览器，因为它们使用 HTML5 的文件 API（参见 kellishaver.tumblr.com/post/21428272282/…）
@bcd - Tnx！这行得通！

标签： javascript jquery ruby-on-rails html carrierwave

【解决方案1】：

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

【讨论】：

【解决方案2】：

我在使用 Transloadit:https://transloadit.com/ 并在成功通话中将其交给 Carrierwave 方面取得了很多成功。还有一个 transloadit gem 可以让事情变得更简单：https://github.com/transloadit/rails-sdk。使用此方法将为您提供预览、模式、加载栏和许多其他选项，您可以打开或关闭以获得出色的用户体验。它具有与carrierwave相同的调整大小或裁剪选项，或者您可以将其交给carrierwave为您完成。您对控制器的 jquery 回调可能类似于：

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

【讨论】：