파일 API를 이용한 미리보기 구현

2020/05/16 - [WEB/Spring] - 이미지 업로드 (Spring+Ajax)

이미지 업로드 (Spring+Ajax)

이어서 미리보기를 구현하겠습니다.

 

var upload = document.querySelector('#file');
upload.addEventListener('change',function (e) {
	var get_file = e.target.files;
	var selected_file = upload.files[0];
	var idxDot = selected_file.name.lastIndexOf(".") + 1;
	var extFile = selected_file.name.substr(idxDot, selected_file.name.length).toLowerCase();
	
    if (extFile == "jpg" || extFile == "jpeg" || extFile == "png" || extFile == "svg" || extFile == "gif") {
		var image=document.createElement('img');
		var reader = new FileReader();
        
		reader.onload=(function(aImg){
			return function(e){
				aImg.src=e.target.result;			
				//파일 사이즈 체크
				var oriSize = upload.files[0].size/1000000;
				var stopTemp = (oriSize+"").indexOf(".");
				var size = (oriSize+"").substring(0,stopTemp) + (oriSize+"").substring(stopTemp,4);
				if (size>2) {
					alert("이미지 크기 : "+size+"MB\n2MB보다 낮은 이미지를 다시 올려주세요.");
				}else{
					alert("이미지 크기 : "+size+"MB\n이미지를 적용할 수 있습니다.");
					//미리보기 변경
					preDef.style.display = 'none';
					preView.style.display ='block';
					preView.style.backgroundImage ='url(\"'+e.target.result+'\")';
				}
			}
		})(image)	
		
        if(get_file){
			reader.readAsDataURL(get_file[0]);
		}
        } else {
        alert("이미지 파일만 업로드 가능합니다. ex) jpg/jpeg, png, svg, gif");
        }
})

코드를 먼저 살펴보면 저번 글에서 JSP input태그 안에 id를 file로 했던 것을 가지고 왔습니다.

이벤트 리스너를 걸어주어서 change 즉 변화가 생길때 실행되는 함수입니다.

e.target.files 에서 files는 선택된 파일의 File 객체를 포함하는 배열을 뜻합니다.

Hyper에서는 다중업로드가 없기 때문에 files[0] 으로 첫 번째 배열에 있는 객체를 가지고 옵니다.

 

jpg,png 등의 확장자만을 허용하기 위해  .name을 해서 파일명을 가지고 왔습니다.

 

onload를 사용할 건데 즉시실행함수를 매개변수로 aImag를 넘겨주면 내부에서 불러 사용이 가능해집니다.

 

그리고 if로 넘어가서 file이 있을 경우 readAsDataURL 메서드를 사용하면 DataURL형식으로 읽어 들인 것을 result속성에 담깁니다.

 

 

파일 읽음 -> if(get_file)로 넘어가서 URL형식으로 result에 담김 ->onload함수 실행

 

 

 

미리보기 적용