file upload의 확장자검사 및 썸네일노출

• 들어가기 전에 파일을 업로드 할 때, 몇 가지 확인이 필요한 경우가 있습니다. 서버에서 모든 것을 체크하지 않고 클라이언트에서 체크하면 더 빠르게 유효성을 판단할 수 있습니다. 이미지 파일의 확장자가 올바른지, 썸네일 이미지를 화면에 노출하는 방법을 알아볼 것입니다.

---

학습 목표

1. 파일확장자 기반 유효성검증 및 썸네일 이미지를 노출할 수 있다.

핵심 개념

• image file 확장자 검사
• 썸네일 이미지 노출

학습하기

이미지 파일 확장자 유효성 검사

file의 확장자 검사는 HTML input태그의 accept 속성으로 쉽게 필터링할 수 있습니다. <input type="file" name="reviewImg" id="reviewImageFileOpenInput" accept="image/png, image/jpeg"> 이렇게 하면, file 선택 창에서 지정한 확장자 파일만 자동으로 선택할 수 있게 브라우저가 돕습니다. 그런데, accept 속성의 브라우저 지원상황이 깔끔한 상태가 아니므로, 더 많은 브라우저에서 동작하는 코드를 알아보겠습니다. file을 업로드 하면, change 이벤트를 통해서 이를 감지할 수 있습니다. 그리고 나면 file객체를 얻을 수 있습니다. file 객체는 event객체의 target으로부터 얻을 수 있습니다. const elImage = document.querySelector("#reviewImageFileOpenInput"); elImage.addEventListener("change", (evt) => { const image = evt.target.files[0]; if(!validImageType(image)) { console.warn("invalide image file type"); return; } }) 그리고 나면 다음과 같이, validImageType메서드를 만들고,확장자 검사를 하면 됩니다. function valideImageType(image) { const result = ([ 'image/jpeg', 'image/png', 'image/jpg' ].indexOf(image.type) > -1); return result; } 위와 같이 구현할 수 있을 겁니다. 별다른 설명을 하지 않아도 이 코드를 이해할 것으로 생각됩니다. image객체의 type값을 통해서 결과를 확인하는 코드입니다.

이미지 썸네일 노출

이미지를 올리고 나면, 썸네일 이미지가 노출되곤 합니다. 사용자가 올린 이미지가 어떤 것인지 썸네일로 인식시켜주는 것이죠. 원래는 Ajax로 image와 같은 파일을 먼저 서버로 올린 후, 잘 올라갔으면 어떤 응답 값을 받습니다. 예를 들어 썸네일이미지 주소를 받을 수 있을 겁니다. 그 정보를 받아서 화면에 썸네일 이미지를 노출하는 것이 일반적인 과정입니다. 우리는 편의상 서버로 이미지를 실제로 올리기도 전에,createObjectURL를 사용한 썸네일 노출 방법을 알아봅니다.createIbjectURL라는 URL에 있는 정보를 활용해서 image 정보를 화면에 넣어볼 겁니다. const elImage = document.querySelector("#reviewImageFileOpenInput"); elImage.addEventListener("change", (evt) => { const image = evt.target.files[0]; if(!valideImageType(image)) { console.warn("invalide image file type"); return; } //이렇게 넣으면 이미지 정보가 화면에 노출됩니다. const elImage = document.querySelector(".thumb_img"); elImage.src = window.URL.createObjectURL(image); }) 'thumb_img'클래스를 가진 image엘리먼트에 속성으로 image객체를 추가하면 됩니다.