JavaScript 또는 jquery를 사용하여 업로드하기 전에 이미지를 미리 보는 방법은 무엇입니까?

Question

업로드하기 전에 사용자가 선택한 (찾아보기) 이미지 만 표시하면됩니다. 이를 위해 나는이 코드를 사용하고 있습니다 :

JS

function setImage(file) { 
    if(document.all) 
     document.getElementById('prevImage').src = file.value; 
    else 
     document.getElementById('prevImage').src = file.files.item(0).getAsDataURL(); 
    if(document.getElementById('prevImage').src.length > 0) 
     document.getElementById('prevImage').style.display = 'block'; 
} 

HTML을

<img id="prevImage" src="" alt="" width="313" height="315" /> 
<input name="photo1" id="photo1" type="file" onchange="setImage(this);" value="" class="input" size="17"/> 

사파리, 파이어 폭스 3,4,5에서 잘 작동이 코드를하지만,하지 않습니다 Google 크롬 12 이상 및 IE 8, 9에서 작동합니다.

이 문제와 관련된 해결책을 알려주십시오.

다른 웹 사이트에서 이미 다른 해결책을 시도했지만 모든 주요 브라우저에서 작동하지 않습니다.

이 코드 또는 완전히 새로운 코드에 대한 해결책이 있다면 알려주십시오.

Answer 1

stack post에서 완전한 해결책을 찾고, here이 해결책입니다.

Answer 2

표준 웹 API 인 FileReader을 사용할 수도 있습니다.