[JSP/JavaScript&HTML] 업로드하는 파일 미리보기(썸네일) 기능

 <input id="upfile" name="upfile" type="file" aria-label="upfile" accept=".jpg, .jpeg, .png" >
  <img id="img" style="height:  150px; width: 150px; display: none;>

미리보기를 위하여 위 코드와 같이 accept 속성으로 사진파일만 등록이 가능하게끔 제한한다.

$(document).ready(function(){
		$("#upfile").on("change", handleImgFileSelect);
	})
		
		function handleImgFileSelect(e){
			var files = e.target.files;
			var reader = new FileReader();
			reader.onload = function(e){
				$("#img").attr("src", e.target.result);
				$("#img").css("display", "block");
			}
			reader.readAsDataURL(files[0]);
		}

upfile 즉 파일업로드하는 input이 바뀔때마다 메소드가 실행되게끔 제이쿼리를 준 후

메소드에 대해 설계를 한다.

해당 파일을 가져오는 files 코드를 주어 인스턴스를 생성하고 reader도 파일 리더로 인스턴스를 준다.

reader에 파일이 업로드되면 이미지에 src를 부여하는 코드와

img의 css 속성 중 display를 block으로 바꿔주는 코드를 넣는다.

reader에 files의 0번째 인덱스를 업로드해준다.

그럼 해당 이미지와 같이 썸네일이 보이게되는 기능이 완성된다.