안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.
이번 포스팅에서는 자바스크립트 중에서도 제이쿼리로 개발할 때,
인풋 타입 파일로 업로드할 때 이미지 사이즈 제한·지정하는 방법에 대해 알아보겠습니다.
여기서 말하는 인풋 타입 파일이란, 아래와 같은 내용입니다.
<input type="file">
이렇게 input 태그에 type 속성을 file로 정해주면
아래 이미지처럼 자동으로 파일을 선택하는 버튼과 선택한 파일 명이 보여지는 기능이 구현이 됩니다.
참 유용한 기능이죠?
이 때, 어떻게 하면 업로드하는 이미지의 사이즈를 제한할 수 있을까요?
지금부터 알아보겠습니다.
인풋 타입 파일로 업로드할 때 이미지 사이즈 제한·지정하는 방법
1. input 태그에 data-* 속성 추가하기
data-width, data-height 속성을 통해 원하는 이미지의 너비와 높이를 지정해 주세요.
width가 너비, height가 높이입니다.
<input type="file" data-width="300" data-height="300">
2. js코드 작성하기
코드 설명은 주석으로 적어뒀습니다.
주석을 따라 코드를 이해하시다보면, 절대 어렵지 않은 내용이란 걸 아실 수 있을 거예요 :)
이렇게 작업하고 사이즈별로 이미지를 만들어서 테스트까지 해보세요!
// 문서 안에 있는 input[type=file] 태그가 변했을 때 함수를 실행한다. $(document).on('change', 'input[type=file]', function(){ // 너비와 높이, 그리고 대상을 변수로 지정한다. let $width = $(this).attr('data-width'); let $height = $(this).attr('data-height'); let $target = $(this); //FileReader를 지원하는 브라우저의 경우 IE10이상이라면 if(window.FileReader){ // 새로운 파일리더를 생성하고 let reader = new FileReader(); // 생성한 파일리더는 해당 함수를 실행한다. reader.onload = function (e) { // body 태그 안에 임시로 이미지를 담을 수 있는 img태그를 생성한다. // style에 'display: none;'을 설정하여 보이지 않도록 한다. $('body').append('<img src="" id="temp_img" style="display:none;" />'); // 생성한 임시 img 태그 안에 이미지가 생성이 되면 // 해당 이미지의 정보를 $img에 담아준다. let $img = $('#temp_img').attr('src', e.target.result) // 임시 img 태그의 정보를 가지고 // data-* 속성으로 지정한 높이와 너비를 비교한다. if($img.width() > $width || $img.height() > $height){ // 지정한 높이*너비보다 크면 alert을 호출한다. alert('등록한 이미지의 사이즈가 지정된 사이즈와 맞지 않습니다.('+$width + 'x'+ $height +')'); // 파일 등록한 input을 비워준다. $target.val(''); // 위에서 생성한 임시 img 태그를 삭제한다. $('#temp_img').remove(); return; }; }; // 등록한 파일을 input에 설정한 파일리더가 인식할 수 있도록 // readAsDataURL 메서드로 url을 불러온다. reader.readAsDataURL($(this)[0].files[0]); } else { // FileReader를 지원하지 않는 브라우저의 경우 IE9 이하일 때 실행되는 함수 // 위 내용과 실행되는 내용은 같습니다. $(this)[0].select(); let src = document.selection.createRange().text; $('body').append('<img src="" id="temp_img" style="display:none;" />'); $img = $('#temp_img').attr('src', src); $('#temp_img').remove(); if($img.width() > $width || $img.height() > $height){ alert('등록한 이미지의 사이즈가 지정된 사이즈와 맞지 않습니다.('+$width + 'x'+ $height +')'); $(this).val(''); return; } $('#temp_img').remove(); } });
728x90
