使用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上传之前的预览图像

回答

相关问题