jQuery | 이미지 업로드 전 미리 보기

$(document).ready(function(){ $('.invisible_file .file').change(function(){ var val = $(this).val(); var thisDom = $(this)[0]; console.log("val : " + val); console.log("thisDom : " + thisDom); if (thisDom.files && thisDom.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#thumb_img').attr('src', e.target.result); } reader.readAsDataURL(thisDom.files[0]); } }); });

input type=file 의 val 을 가져오면 해당 파일의 경로가 'c:\Fake\파일' 이런 식으로 나오게 된다.

미리보기를 하려면 현재 파일의 제대로된 경로를 알아야 하므로

FileReader 를 이용하여 현재 input type=file 태그에 입력된 파일 주소를 가져와서 img 태그에 뿌려줬다.

.change() 메소드를 이용해 input 태그의 변화가 생기는 걸 감지해 파일 선택을 마친 순간에 해당 함수가 실행되도록 했다.

jQuery(this) 는 jQuery 객체 이므로 현재 입력된 file 정보를 얻기 위해 jQuery(this)[0] 을 써서 해당 Dom 객체를 받아오도록 했다.