Ruby on rails Rails：回形针和预览？

你知道在一些网站上，当你被要求上传，比如说，一个头像时，你点击按钮，选择你的文件，然后点击OK，但是在你提交页面之前，没有创建/更新任何记录，会显示一点图像预览吗

我将如何使用for Rails实现这一点

任何人都可以向我推荐教程或其他东西，告诉我如何在保存记录之前对图像进行Javascript裁剪，这对他们来说都是一个额外的奖励

---

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

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

为你的图片上传制作一个子表单，可能会使用使其更加精简。 创建一个模型来接收您的上传，其中包括一些用于检索和链接的随机访问键。回形针处理附加的文件。 当子表单完成时，使用AJAX插入一个隐藏字段，或者可能插入一个带有相应唯一_键的可见复选框元素，从而填充主表单。 典型的模型如下所示：

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

当人们上传和重新上传图像时，最终会有大量的孤立记录，而这些记录实际上并不在任何地方使用。编写一个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

---

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

或者您可以使用ajax和iframe

---

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

<%= 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>

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

<%= 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>