코딩 공부/JS

[script] - 이미지 프리뷰, 이미지 용량 체크

hg_96 2022. 1. 11. 14:39

이미지 프리뷰

		function previewImage(f, getid){
			// 변수로 this와 프리뷰를 보여줄 아이디를 사용, 이미지인풋에 onchange="previewImage(this, '썸네일영역아이디')"
			var file = f.files;
			// 확장자 체크
			if(!/\.(gif|jpg|jpeg|png)$/i.test(file[0].name)){
				alert('gif, jpg, png 파일만 선택해 주세요.\n\n현재 파일 : ' + file[0].name);
				// 선택한 파일 초기화
				f.outerHTML = f.outerHTML;
				document.getElementById('preview').innerHTML = '';
			}
			else {
				// FileReader 객체 사용
				var reader = new FileReader();
				// 파일 읽기가 완료되었을때 실행
				reader.onload = function(rst){
					document.getElementById(getid).innerHTML = '<img src="' + rst.target.result + '" style="float: left; width:200px; height: 200px; ">';
				}
				// 파일을 읽는다
				reader.readAsDataURL(file[0]);
			}
		}

 

이미지 용량(크기) 체크

		function checkFile(el){
			// 이미지인풋에 onchange="checkFile(this)"
			var file = el.files;
			if(file[0].size > 1024 * 1024 * 5){
				alert('5MB 이하 파일만 등록할 수 있습니다.\n\n' + '현재파일 용량 : ' + (Math.round(file[0].size / 1024 / 1024 * 100) / 100) + 'MB');
			}
			else return;
			el.outerHTML = el.outerHTML;
		}