HTML로 업로드하기 전에 이미지를 미리 보는 방법은 무엇입니까?

Question

나는 기능

<script> 
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]); 
    } 
} 
$("#upload").change(function() { 
    readURL(this); 
}); 
</script> 

을 수정하고 본문 요소에서 내 양식이 입력을 포함했다 :

<input type="file" name="uploaded_files" id="upload"/> 
<img id="blah" src="#" alt="your image" /> 

을 나는 또한 jQuery를 포함했다 : 그것은 JsFiddle에서 일하고

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

,하지만 내 로컬 호스트에서 작동하지 않습니다.

Answer 1

당신은 어느 쪽 스크립트 JS 블록과 무엇을했는지 아무 문제가 전혀 없다 같이하십시오. 가서 JSFiddle에 가면 확인할 수 있습니다.

---

스크립트가 의존하기 때문에 jQuery 라이브러리를 올바르게로드했는지 확인하십시오.

Answer 2

는

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); 
}); 

Demo