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

파일을 업로드 하기 전에 서버에서 모든 것을 체크하지 않고

클라이언트에서 체크하면 더 빠르게 유효성을 판단할 수 있다.

이미지 파일의 확장자가 올바른지, 썸네일 이미지를 화면에 노출하는 방법을 알아보자.

 

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

file의 확장자 검사는 HTML input 태그의 accept 속성으로 쉽게 필터링할 수 있습니다.

<input type="file" name="reviewImg" id="reviewImageFileOpenInput" accept="image/png, image/jpeg">

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를 사용한 썸네일 노출 방법을 알아봅니다.

createObjectURL 라는 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객체를 추가하면 됩니다.

 

---

참고 자료

 

[참고링크] file input 처리하는 방식 설명

https://developer.mozilla.org

 

[참고링크] file 을 처리하는 다양한 방법들

http://chris.improbable.org

 

[참고링크] createObjectURL

https://developer.mozilla.org