AJAX 요청 및 답변

Question

"새 블로그"양식을 만들고 양식에 몇 개의 사진 업로드 필드가 있습니다. AJAX를 사용하여 게시물 요청을 보내고 사진을 업로드하고 "새로운 블로그"양식에 표시 할 사진 URL을 반환 할 수있는 방법이 있습니까? 내 백 엔드는 레일의 루비로 작성되었습니다.

나는 그것이 의미가 있기를 바랍니다! 어떤 도움이 크게 그것을 감사!

감사합니다, 알렉스

Answer 1

예,하지만 조금 복잡합니다. 문제는 AJAX를 통해 업로드 된 파일을 보낼 수 없다는 것입니다. 그러나 대부분의 사람들이 사용하는 간단한 해결 방법이 있습니다.

이것이 작동 방식입니다. 사진을 보이지 않는 iFrame에 업로드합니다. 이 iframe을 업로드 양식의 대상으로 설정하면 사용자는 페이지를 다시로드하지 않고도 양식을 제출할 수 있습니다.

예 : iframe을 숨길

<iframe id="upload"></iframe> 
<%= form_for @photo, :html => { :multipart => true, :id => 'photo_upload_form', :target => 'upload' }, :url => photos_path do |f| %> 
    <div class="field"> 
    <%= f.label :image, 'Upload Photo' %> 
    <%= f.file_field :image %> 
    </div>  
<% end %> 

... 물론 CSS를 사용. 나는 한 번 display: none와 iframe을 숨기기에 문제가 있다고 생각, 그래서 나는 같은 것을 사용하여 오프 화면을 이동하는 것이 좋습니다 : 당신이 숨겨진 내부 렌더링 뷰에서 자바 스크립트를 사용할 수 있습니다 마지막으로

#upload { position: absolute; left: -10px; top: -10px; width: 1px; height: 1px; } 

을 iFrame은 window.parent을 통해 업로드되므로 업로드 된 이미지를 업로드 양식에 실제로 표시 할 수 있습니다.