쇼핑몰 서비스에서 필수적으로 구현하게 되는 상품 등록하기 화면을 맡아 개발하게 되었다.

화면 구성은 아래와 같다.

기본적으로 내용은 form 태그를 이용해서 구현해서 특별할 게 없다.

이번 글에서는 다른 사람들이 궁금해할 만한 기능인 “이미지 파일 첨부 후 미리보기”에 관해 집중적으로 포스팅 해보려고 한다.

이미지 파일 예쁘게 첨부하고 미리보기

조건은 다음과 같다.

1. ‘파일 첨부’ 버튼은 없다. 이미지가 미리보기 될 영역을 클릭해서 파일을 첨부할 수 있게 하자.
2. 첨부된 이미지를 적절한 크기로 미리보기할 수 있어야 한다.

기본적인 input 선언하기

<form>
	<label for="productImage"></label>
  <input
		type="file" 
		id="productImage"
    name="productImage"
    required
  />
</form>

우선 이미지 또한 form의 input이기 때문에 input 태그로 선언했다.

이미지 파일을 입력받아야하므로 type은 file이다.

이렇게 하면 파일 첨부를 할 수는 있다. 하지만 파일을 입력받을 때 신경써야하는 것이 하나 있다.

입력된 파일이 안전한지 확인하기

function checkFile() {
  var fileInput = document.getElementById("productImage");
  var file = fileInput.files[0];

  if (file) {
    var fileType = file.type;
    var fileSize = file.size;

    if (fileType !== "image/jpeg" && fileType !== "image/png") {
      alert("이미지 파일은 jpg 또는 png 형식이어야 합니다.");
      fileInput.value = "";
    } else if (fileSize > 5000000) {
      // 5MB
      alert("이미지 파일의 크기는 5MB 이하여야 합니다.");
      fileInput.value = "";
    } 
  }
}

그것은 바로 입력된 파일이 안전한지를 꼭 확인하고 서버에 보내야한다는 점이다.

너무 큰 파일은 문제를 초래할 수 있으며, 이미지 파일 왜 실행 파일 같은 것이 입력되어 서버로 넘어간다면 큰 문제를 초래할 수 있기 때문이다. 이미지 파일 크기는 대부분의 쇼핑몰에서 선택하는 기준으로 여겨지는 5MB를 기준으로 설정해보았다.