[ javascript / jquery ] 입력폼에서 이미지 첨부 시 미리보기 구현

html 예제

<div>
	<label for="imgFile">표지</label>
	<input type="file" id="imgFile" name="imgFile" onchange="selectImg();">
	<div>
    		<img id="preview" src=""/>
	</div>
</div>

 

 

jquery 구현

$( document ).ready(function() {
	$('#imgFile').change(function(){		
		var fr = new FileReader;
		fr.onload = function (e){
			$('#preview').attr('src', fr.result);
		}
		fr.readAsDataURL(this.files[0]);
	});
});

 

 

javascript 구현

function selectImg(){
	var imgFile = document.getElementById("imgFile");
	var fileList = imgFile.files;
			
	var fr = new FileReader;
	fr.onload = function (data){
		document.querySelector('#preview').src = fr.result;
	}
	fr.readAsDataURL(fileList[0]);
}