使用Carrierwave上傳之前的預覽圖像

我有一個表單，用戶可以在其中創建新圖片。我已經用Carrierwave成功完成了它。我想知道在上傳之前是否可以在瀏覽器中預覽選定的圖像？我發現一些JavaScript的嘗試，但沒有爲我工作。使用Carrierwave上傳之前的預覽圖像

這是圖片上傳的代碼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，因爲它可能只適用於服務器端...

任何想法？ :)

來源

2014-02-17 Cristiano

有一些方法，但不能跨瀏覽器的，因爲他們使用HTML5的File API（請參見http：//kellishaver.tumblr .com/post/21428272282 /使用這個文件的api-to-preview-images-before-upload） – bcd

@bcd - Tnx！這樣可行！ – Cristiano

我發現在使用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(); 
    } 
    }); 
}

來源

2014-02-18 01:08:05

如果您使用的自舉3有一個真棒擴展在這裏 http://jasny.github.io/bootstrap/javascript/#fileinput

來源

2014-12-03 13:37:54 Max

使用Carrierwave上傳之前的預覽圖像

回答

相關問題