웹에서 이미지를 업로드 할때 업로드할 이미지를 미리 보여주기가 필요할때 있습니다. 업로드 하면 이런식으로 올라갈거다 라고 알려주듯이 말이죠. 이 기능이 필요해서 구현하려고 하는데, 최근 브라우저에서는 보안 상의 이유로 이미지의 로컬 경로를 "fakepath" 로 반환 해주더군요.
이 것 때문에 골치를 썩고 있었는데 적절한 방법을 알아내서 포스팅 해봅니다. 간단하게 아래와 같이 javascript를 추가해주면 됩니다.
출처 : http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded
<script type="text/javascript">
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]);
}
}
</script><body>
<form id="form1" runat="server">
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</form>
</body>