导轨:回形针 &预览?

问题描述

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

You know on some sites when you're asked to upload, say, an avatar, you click on the button, select your file, then hit OK, but before you Submit the page (as in, no record is created/updated), a little preview of the image shows up?

我将如何使用 Paperclip for Rails 完成此操作?

How would I accomplish this using Paperclip for Rails?

如果有人可以指导我学习教程或其他可能会告诉我如何在保存记录之前对图像进行 Javascript 裁剪的内容，则可以获得奖励积分.

Bonus points for anyone who can point me towards a tutorial or something that might tell me how to do a Javascript crop on the image before saving the record.

我在 Google 上找不到太多关于该主题的信息……感谢您的帮助！

I haven't been able to find much on Google on the subject... thanks for the help!

推荐答案

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

This kind of thing is problematic from a Rails perspective because of the way image uploads work. One strategy to make it work better is:

• 为您的图片上传制作一个子表单，可能使用 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 是有利的，因为很难判断用户在上传时是否应该能够看到这张图片，因为可能尚未分配所有者用户.

The reason for the unique_key field is so that you can link this in to the form of a potentially unsaved record. It is advantageous to use the unique_key instead of id when putting it in URLs since it is hard to tell if a user should be able to see this picture or not when it is uploaded since the owner user may not yet be assigned.

这还可以防止好奇的人更改您 URL 中的某种连续的、易于猜测的 ID 并查看已上传的其他头像.

This also prevents curious people from altering some kind of sequential, easily guessable ID in your URL and seeing other avatars that have been uploaded.

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

You can retrieve the final resized thumbnail URL for the Avatar as you would any model at this point.

您可以轻松地删除收到的参数并将其转换回头像 ID 号:

You can easily strip out the parameters on receipt and translate back to Avatar ID numbers:

# 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 任务来清除所有这些是很简单的.例如:

As people upload and re-upload images, you will eventually have a large number of orphaned records that are not actually used anywhere. It is simple to write a rake task to purge all of these after a reasonable amount of time has passed. For example:

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 也应该具有清除所有回形针材料的效果.

Using destroy_all should have the effect of purging all Paperclip material as well.

这篇关于导轨:回形针 &预览?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！