レール:ペーパークリップとプレビュー?

StackOverflow https://stackoverflow.com/questions/2232008

  •  19-09-2019
  •  | 
  •  

質問

一部のサイトでは、たとえばアバターをアップロードするように求められたときに、ボタンをクリックしてファイルを選択し、[OK] をクリックしますが、 前に ページを送信すると (レコードは作成/更新されません)、画像の小さなプレビューが表示されますか?

を使用してこれを実現するにはどうすればよいですか ペーパークリップ レール用？

レコードを保存する前に画像を Javascript でトリミングする方法を教えてくれるチュートリアルや何かを教えてくれる人にはボーナスポイントです。

この件については Google であまり見つかりませんでした...助けてくれてありがとう！

役に立ちましたか？

解決

画像アップロードの仕組み上、この種のことは Rails の観点からは問題があります。それをより良く機能させるための 1 つの戦略は次のとおりです。

  • おそらく次を使用して、画像アップロード用のサブフォームを作成します。 swfアップロード より合理化するために。
  • アップロードを受信するためのモデルを作成します。これには、アップロードの取得とリンクに使用されるランダム化されたアクセス キーが含まれます。Paperclip は添付ファイルを処理します。
  • 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 に入れるときに id の代わりに unique_key を使用することが有利です。

これにより、好奇心旺盛な人が URL 内の何らかの連続した簡単に推測できる ID を変更したり、アップロードされた他のアバターを閲覧したりすることも防止できます。

この時点では、他のモデルと同様に、アバターの最終的なサイズ変更されたサムネイル URL を取得できます。

受信時にパラメータを簡単に削除して、アバター 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

使用する すべてを破壊する すべてのペーパークリップ素材をパージする効果もあるはずです。

他のヒント

私は解決策は、ここの便利掲載、あなただけ変更する必要が見つかりました（あなたは、単一のファイルのアップロードを行っている場合）は、それが唯一のファイルであることをます：

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

注：私は、ペーパークリップのための別のモデル、画像の属性を持つアップロードモデルを使用。あなたは（それ以外の場合は、元のサイズになります）画像サイズをフォーマットする画像のプレビュータグにスタイルを追加することができます。

それとも、AJAXとiframeを使用することができます http://www.html5rocks.com/en/tutorials/ファイル/ dndfiles /＃TOC-読み取り、ファイルの

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top