본문 바로가기
웹 코딩/JS + jQuery

파일 업로드 미리 보기

by 알릭2 2020. 8. 14.

파일.. 특히 이미지 같은거 올릴 때 파일 선택하면 실제 업로드 하기 전에 미리 보여주기

 

대략 위 예시같은 기능...

 

<input type="file" onchange="readURL(this);" >
<br /><br />
<img id="preview" />

 

function readURL(input) {
	if (input.files && input.files[0]) {
		var reader = new FileReader();
		reader.onload = function(e) {
			document.getElementById('preview').src = e.target.result;
		};
		reader.readAsDataURL(input.files[0]);
	} else {
		document.getElementById('preview').src = "";
	}
}

 

구현은 단순

 

 

https://jsfiddle.net/alikong/hkzxegm6/

 

 

 

댓글