클립을 사용하여 업로드 된 이미지의 미리보기 이미지를 즉시 표시하려면 어떻게해야합니까?

Question

내 앱에서 사용자는 블로그에 이미지를 업로드 할 수 있습니다. 이제 파일을 선택할 때 즉시 업로드 된 이미지의 미리보기 이미지를 표시하여 양식에서 "제출"을 누르기 전에 선택한 이미지를 알 수 있습니다.

어떻게하면됩니까?

<hr> 
    <h4>Name your blog<br /> 
    & upload an image for it</h4><br /> 


    <%= f.text_field :name, class: "blog-name", placeholder: "Name it here" %><br /> 
    <%= f.file_field :image %> 
    ----> I'd like to show the image here, instantly <---- 
    <%= f.submit "Next", class: "next-button" %> 
    <br><br> 
    </div> 
    <% end %> 

Answer 1

종이 클립은 즉시 이미지 미리보기를 표시 할 수 없습니다 :

여기에 내 현재 코드입니다. Paperclip은 Ruby on Rails ActiveRecord 용 플러그인으로, 다른 모든 속성과 마찬가지로 파일을 쉽게 사용할 수 있습니다. 여분의 데이터베이스 테이블이없고, 이미지 처리를 위해 설치할 라이브러리가 하나 뿐이며, 다른 속성을 참조 할 때 쉽게 파일을 참조 할 수 있습니다.

javascript/jQuery를 사용하면 즉석 이미지 미리보기를 얻을 수 있습니다. 아래는 이미지 미리보기를 보여주는 코드입니다.

JSFiddle Demo.

HTML :

<form id="form1" runat="server"> 
    <input type='file' id="imgInp" /> 
    <img id="blah" src="#" alt="your image" /> 
</form> 

JS는 :

function readURL(input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#imgInp").change(function(){ 
    readURL(this); 
});