18

您知道在某些网站上，当您被要求上传头像时，您单击按钮，选择您的文件，然后点击确定，但在您提交页面之前（如，没有创建/更新记录），显示图像的小预览？

我将如何使用Paperclip for Rails 完成此任务？

任何可以将我指向教程或可能告诉我如何在保存记录之前对图像进行 Javascript 裁剪的人的奖励积分。

我在谷歌上找不到太多关于这个主题的东西……谢谢你的帮助！

4

3 回答 3

19

从 Rails 的角度来看，这种事情是有问题的，因为图像上传的工作方式。使其更好地工作的一种策略是：

  • 为您的图像上传制作一个子表单，可能使用swfupload使其更加精简。
  • 创建一个模型来接收您的上传，其中包括一些用于检索和链接它的随机访问密钥。回形针处理附加的文件。
  • 当子表单完成时，使用 AJAX 通过插入隐藏字段或可能具有适当 unique_key 的可见复选框元素来填充主表单。

一个典型的模型如下所示：

class Avatar < ActiveRecord::Base
  has_attached_file :image
  # ... Additional Paperclip options here

  before_validation :assign_unique_key

  belongs_to :user

  def to_param
    self.unique_key
  end

protected
  def assign_unique_key
    return if (self.unique_key.present?)

    self.unique_key = Digest::SHA1.hexdigest(ActiveSupport::SecureRandom.random_number(1<<512).to_s)
  end
end

unique_key 字段的原因是您可以将其链接到可能未保存的记录的形式。将其放入 URL 时使用 unique_key 而不是 id 是有利的，因为在上传时很难判断用户是否应该能够看到这张图片，因为可能尚未分配所有者用户。

这也可以防止好奇的人在您的 URL 中更改某种顺序的、容易猜到的 ID 并查看其他已上传的头像。

此时，您可以像检索任何模型一样检索 Avatar 的最终调整大小的缩略图 URL。

您可以轻松地将收据上的参数剥离并转换回 Avatar ID 号：

# If an avatar_id parameter has been assigned...
if (params[:user][:avatar_id])
  # ...resolve this as if it were a unique_key value...
  avatar = Avatar.find_by_unique_key(params[:user][:avatar_id])
  # ...and repopulate the parameters if it has been found.
  params[:user][:avatar_id] = (avatar && avatar.id)
end

# ... params[:user] used as required for create or update

随着人们上传和重新上传图像，您最终将拥有大量实际上并未在任何地方使用的孤立记录。在经过一段合理的时间后，编写一个 rake 任务来清除所有这些是很简单的。例如：

task :purge_orphan_avatars => :environment do
  # Clear out any Avatar records that have not been assigned to a particular
  # user within the span of two days.
  Avatar.destroy_all([ 'created_at<? AND user_id IS NULL', 2.days.ago ])
end

使用destroy_all也应该具有清除所有回形针材料的效果。

于 2010-02-09T20:44:27.660 回答
5

我发现这里发布的解决方案很有用，您只需将其修改为只有一个文件（如果您正在执行单个文件上传）：

<%= image_tag @upload.image, id:"something_unique"%>
<div class="row">
  <%= form_for @upload, :html => { :multipart => true } do |f| %>
    <%= f.file_field :image, id:"something_else_unique" %>
    <%= f.submit "Add photo" %>
  <% end %>
</div>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
      f=files[0]
      // Only process image files.
      if (f.type.match('image.*')) {
        var reader = new FileReader();
        reader.onload = (function(theFile) {
          return function(e) {
            // alert(e.target.result);
            document.getElementById("something_unique").src=e.target.result;
          };
        })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
      }
    }
  document.getElementById('something_else_unique').addEventListener('change', handleFileSelect, false);
</script>

注意：我为回形针使用了一个单独的模型，一个具有图像属性的上传模型。您可以将样式添加到图像预览标签以格式化图片大小（否则它将是原始大小）。

于 2014-05-21T20:14:06.060 回答
0

或者您可以使用 ajax 和 iframe http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files

于 2012-11-15T04:13:12.243 回答