이미지를 업로드하고 jQuery 및 Rails로 새로 고치지 않고 이미지를 표시하는 방법은 무엇입니까?

Question

내가 양식이 제출 버튼이없는

<form ...>  
    <input type="file" id="upload"></input> 
</form> 

같은 이미지를 사용 무언가를 업로드하려면, 나는 그것을 대체 할 DIV합니다 나는 희망

<div id="submit"></div> 

을 사업부를 클릭 할 때 의 이미지가 업로드되고 새로 고침없이 다른 이미지로 표시됩니다.

내가 아약스를 사용해야한다는 것을 알고 있지만 jQuery와 Rails로 어떻게 구현하는지 모르겠다. . 내가 $ .post를 사용하려고

컨트롤러에 업로드 된 파일을 게시,하지만 방법

1. $ ("# 업로드") 발()는 반환 :

   다음

   내 질문입니다 파일 경로, 내용 없음

2. 여기 내 목표를 달성하기위한 나의 생각은 효과가 있습니까?

   (1)을 클릭합니다. ("# 제출") $에 기능을 결합 컨트롤러에 파일을 게시

   (2) 컨트롤러/공용 폴더에 파일을 저장 파일의 URL을 렌더링

   내 생각은 문제가있는 경우

   (3) URL에 대한 일부의 SRC를 설정하는 $의 .post의 콜백과 같은 함수를 정의는

   는

   감사합니다 ... 나에게 올바른 방법을 알려주세요 !! !!

Answer 1

가장 좋은 해결책은 문제를 해결하는 데 도움이되는 jQuery plugin을 사용하는 것입니다.

이미지가 업로드되면 JSON이 이미지의 위치에 대한 응답으로 반환됩니다.

그런 다음 이미지의 jQuery 또는 순수 JavaScript 업데이트 "src"속성을 사용하십시오.

JSON

{ url: "http://example.com/uploads/image-222.jpg" } 

JS는 성공적으로 업로드

데이터가 JSON 서버에서 당신에게 반환

$('#id-of-your-image').attr(src, data.url); 

에 실행합니다.