1. 홈
  2. 질의 응답
  3. 레일 : 클립 및 미리보기?

레일 : 클립 및 미리보기?

2010-02-09 3 views
18

아바타를 업로드하라는 메시지가 나타나면 버튼을 클릭하고 파일을 선택한 다음 확인을 누르십시오. 전에 이전에 페이지를 제출하십시오 (예 : 레코드가 생성되지 않음)./업데이트), 이미지의 작은 미리보기가 나타 납니까?레일 : 클립 및 미리보기?

레일스 용으로 Paperclip을 사용하면 어떻게 될까요?

튜토리얼 또는 레코드 저장 전에 이미지에서 자바 스크립트 자르기를 수행하는 방법을 알려줄 수있는 사람을위한 보너스 포인트입니다.

Google에서 주제를 많이 찾지 못했습니다 ... 도움을 주셔서 감사합니다!

출처

2010-02-09 neezer

답변

19

이런 종류의 문제는 이미지 업로드가 작동하는 방식 때문에 Rails 관점에서 문제가된다. 더 잘 작동하게하는 전략 중 하나는 다음과 같습니다.

  • swfupload을 사용하여 이미지 업로드의 하위 양식을보다 간소화하십시오.
  • 파일을 검색하고 연결하는 데 사용되는 임의의 액세스 키가 포함 된 업로드를 수신 할 모델을 만듭니다. 클립은 첨부 파일을 처리합니다.
  • 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

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

, 당신은 결국하지 않은 분리 된 레코드의 수가 많은 것 실제로 어디서나 사용됩니다. 합리적인 시간이 지난 후에 이들을 모두 제거하는 레이크 작업을 작성하는 것은 간단합니다. 예를 들어 : destroy_all를 사용

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

뿐만 아니라 모든 종이 클립 물질을 정화하는 효과를 가져야한다.

출처

2010-02-09 20:44:27 tadman

5
내가 솔루션 (당신이 하나의 파일 업로드를하고있는 경우) here 유용, 당신은 단지 하나의 파일로 수정해야 게시 발견

:

<%= 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에 별도의 모델을 사용했습니다. 이미지 미리보기 태그에 스타일을 추가하여 그림 크기를 지정할 수 있습니다 (그렇지 않으면 원래 크기가됩니다).

출처

2014-05-21 20:14:06 hodale

관련 문제

 관련 문제