이미지 파일 업로드는 다방면에서 많이 사용되고 있으며, 기능만 잘 활용한다면

상당히 멋진 이미지 업로드 프로그램을 만들 수 있다. 

나같은 경우 이미지 업로드 시 자바스크립트단에서 FileReader 를 통해 투명하게 미리 보여주고

서버단에서 압축 & 리사징 후에 다시 클라이언트단으로 와서 미리보기 이미지의 투명도를 없애는 방식으로 로딩을 구현했었다.

압축 & 리사이징이을 하는 이유는

요즘 스마트폰 화질이 너무 좋아서, 그대로 업로드 했다간 엄청난 트래픽 폭탄요금을 맞게 된다. 

본론으로 가서 예전같으면 기술력도 없고, 있다하더라도 귀찮아서 서브밋과 동시에 파일을 서버에 올리고 

올린 파일을 가지고 다시 압축 또는 리사이징 하여 등록을 하였다. 

조금 더 나아가서는 파일을 바로 올리지 않고 압축&리사징하여 최종 파일만 저장하는 방식으로 했으나

서버단으로 전송된 데이터는 전자 나 후자나 비슷한 스펙을 가졌기때문에, 이제 와서는 처음 설명한 클라이언트단에서 

미리 처리하는 방식으로 변경을 하였다. 

이미지 파일 선택 시 이미지를 미리 볼수 있도록 해주는게 FileReader 객체이며 아래의 경우 

이미지를 통해 정보를 출력하는 예제이다. 

[예제바로가기]

<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>
<h1>결과</h1>
<div id="result"></div>

참고로 위의함수에서 Image() 객체도 사용되었는데 이는 이미지 파일의 Width 와 height 값을 가져오기 위해서이다. 

추가로 예제소스 상단의 테스트보기를 클릭해서 직접 확인이 가능하다.