input file의 url 받아 처리하기 + 팁

input file로 이미지든 뭐든 받아서 이것저것 처리할 일이 있는데(썸네일이라든가) 잊어먹기전에 한번 정리를 해둠.

 

1. 파일 지정하기

<input type="file" accept=".jpg,.jpeg,.png"/>

기본적으로 accept 옵션을 써서 위와 같이 처리를 함.

문제는 조건을 아래 3번에서 한번 더 따로 막아줘야 한다는 것임. 왜냐면 파일선택창에서 '모든 파일'을 누르면 걸어뒀던 조건이 리셋이 되기 때문임.

 

기타 accept에 쓰는 방법은 이곳에서 참고

https://developer.mozilla.org/ko/docs/Web/HTML/Element/input/file#accept

<input type="file"> - HTML: Hypertext Markup Language | MDN

 

2. 커스텀 파일찾기

<button class="upload-btn"></button>
<input type="file" accept=".jpg,.jpeg,.png" hidden/>

그냥 쓰면 좋겠지만 항상 시안이 오면 커스텀으로 만들 수 밖에 없는 경우가 있음. 어떻게 만드는지는 자유고 나중에 그 요소를 클릭했을때 input에 클릭 트리거를 걸면 된다( document.querySelector("input[type='file'").click() ).

 

 

3. 파일 url 저장

document.querySelector("input[type='file']").addEventListener("change", function(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  if (file && file.type.includes("image")) { // 한번 막아주기
    reader.onload = function() {
      // 원하는 곳에 넣기
      user1.img = reader.result;
    }
    reader.readAsDataURL(file);
  }
});

중간에 file 타입이 이미지인지 한번 체크해주고, 그 다음에 onload를 써주면 추후에 자동으로 base64로 변환된 데이터가 들어가게 됨.