Source

<h1>이미지 파일 선택</h1>
<input type="file" name="image" accept="image/*" placeholder="이미지 업로드" onchange="imageChange(this);">
<script>
function imageChange(thisObj){ 
	var files = thisObj.files[0];
	var $result = document.getElementById('result');
	if( typeof files == 'undefined'){
		$result.innerHTML = '';
		return false;
	}	
	var view = '<p>file name: '+files.name+'</p>';
	view += "<p>file size: "+files.size+' byte</p>';
	view += "<p>file type: "+files.type+'</p>';
	var reader = new FileReader();
	var img = new Image();
	reader.addEventListener("load", function () {
		img.src = this.result;
	});
	img.onload = function() {
		var w = this.width;
		var h = this.height;
		view += "<p id='image-width'>file image width: "+w+' px</p>';
		view += "<p id='image-width'>file image height: "+h+' px</p>';
		view += "<h3>이미지 미리보기</h3>";
		view += "<p><img src='"+this.src+"' style='border:solid 1px #f00;'/></p>";		
		$result.innerHTML = view;		
	}

reader.readAsDataURL(files);
}
</script>

이미지 파일 선택

결과

REDINFO 블로그 관련글

※ 본 페이지는 REDINFO 블로그에서 제공하는 예제 페이지 입니다.