20220210 미리보기

uploadAjax.jsp

<script type="text/javascript">
	var sel_file;

	$(function() {
		//----------------이미지 미리보기 시작 --------------	
		$("#input_img").on("change", handleImgFileSelect);

		function handleImgFileSelect(e) {
			//e.target : 파일객체
			//e.target.files : 파일객체 안의 파일들
			var files = e.target.files;
			var filesArr = Array.prototype.slice.call(files);

			//f: 파일객체
			filesArr.forEach(function(f) {
				//미리보기는 이미지만 가능함
				if (!f.type.match("image.*")) {
					alert("이미지만 가능합니다");
					return;
				}

				//파일 객체 복사
				sel_file = f;
				//파일을 읽어주는 객체 생성
				var reader = new FileReader();
				reader.onload = function(e) {
					$("#img").attr("src", e.target.result);
				}
				reader.readAsDataURL(f);
			});
		}

		//----------------이미지 미리보기 끝 --------------	
</script>