레일 : PaprClip & Previews?

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

  •  19-09-2019
  •  | 
  •  

문제

일부 사이트에서는 아바타를 업로드하라는 요청을 받으면 버튼을 클릭하고 파일을 선택한 다음 OK를 누르지 만 ~ 전에 페이지를 제출합니다 (기록이 생성/업데이트되지 않음) 이미지의 작은 미리보기가 표시됩니까?

이를 사용하여 어떻게 달성 할 것인가? 클립 레일을 위해?

튜토리얼이나 레코드를 저장하기 전에 이미지에서 JavaScript 작물을 수행하는 방법을 알려주는 사람을위한 보너스 포인트.

주제에 대해 Google에서 많은 것을 찾을 수 없었습니다 ... 도와 주셔서 감사합니다!

도움이 되었습니까?

해결책

이런 종류의 일은 이미지 업로드가 작동하는 방식으로 인해 Rails 관점에서 문제가됩니다. 더 잘 작동하게하는 한 가지 전략은 다음과 같습니다.

  • 이미지 업로드에 대한 하위 형식을 사용하여 swfupload 더 능률적으로 만들기 위해.
  • 검색하고 연결하는 데 사용되는 무작위 액세스 키가 포함 된 업로드를 수신 할 모델을 만듭니다. PaperClip은 첨부 된 파일을 처리합니다.
  • ajax를 사용하여 숨겨진 필드를 삽입하거나 하위 형식이 완료 될 때 적절한 고유 _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

고유 한 _key 필드의 이유는이를 잠재적으로 구원받지 않은 레코드의 형태로 연결할 수 있기 때문입니다. URL에 넣을 때 ID 대신 고유 _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

사람들이 이미지를 업로드하고 다시 업로드함에 따라 결국 실제로 어디에서나 사용되지 않는 많은 고아 레코드가 있습니다. 합리적인 시간이 지나간 후에이 모든 것을 제거하기 위해 갈퀴 작업을 작성하는 것은 간단합니다. 예를 들어:

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 모든 페이퍼 클립 자료를 제거하는 효과가 있어야합니다.

다른 팁

솔루션이 게시되었습니다 여기 유용한 것은 하나의 파일 만 수정하면 (단일 파일 업로드를하는 경우) :

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

참고 : 이미지 속성이있는 업로드 모델 인 PaperClip의 별도 모델을 사용했습니다. 이미지 미리보기 태그에 스타일을 추가하여 사진 크기를 포맷 할 수 있습니다 (그렇지 않으면 원래 크기가 될 것입니다).

또는 ajax와 iframe을 사용할 수 있습니다http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top