업로드하기 전에 이미지를 표시하십시오. javascript/jquery

Question

메시지 기능을 구현하려고합니다. 여기서 사용자는 이미지를 업로드 할 수 있습니다. 업로드 기능이 정상적으로 작동합니다. 하지만 실제로 제출 버튼을 클릭하기 전에 사용자가 업로드하기를 원하는 이미지의 미리보기를 원합니다. 지금까지 이미지 입력에 대한 내 작업 코드는 <input name="attach" type="file" id="attach" /> 입니다. 많은 검색을 해본 결과, onchange="readURL(this);" 함수를 생성하고 input에이 스크립트를 배치하거나 j-query를 사용해야한다는 결론에 도달했습니다. 나는 또한 이미지가 표시 될 이미지 태그를 만들었습니다. <img id="preview_img" style="max-width: 130px; max-height: 130px; display: none" src=""/> 여기에서 나는 혼란스러워합니다. 어떻게하면 자바 스크립트로 이미지 src을 바꿀 수 있습니까? 아니면 어떤 값을 바꿀 것입니까? .

$ ('#의 preview_img') ATTR ('SRC', ':

Answer 1

당신이 (당신이 이런 일을 할 때, 확실하지'로드 '를'클릭 ') 일부의 jQuery 이벤트에 넣고 있습니다 ... ');

Answer 2

이미지 콘텐츠가 src 인 data URI으로 설정하십시오. 이미지를 서버에 업로드하지 않는 한 에 FileReader.readAsDataURL의 데이터 URI 형식으로 콘텐츠 콘텐츠를로드 할 수 있습니다. event.target.files을 통해 또는 this을 통해 선택한 파일에 액세스 할 수 있습니다. 거기에 당신의 코드.

an answer to a similar problem을 살펴보십시오. ID로 input 요소에 액세스하지만 readURL에 보내는 요소를 소비하도록 쉽게 적용 할 수 있습니다.