使用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();
    }
  });
}