이미지 파일 미리보기(JavaScript ES6)

by

이미지를 Blob 개체 URL로 변경하고 img 표시

오늘은 blob 객체를 로컬 윈도우에서만 사용하는 url로 변경하여 html에서 img 태그의 src 속성에 사용해보자!

createObjectURL

URL.createObjectURL() 메서드는 BLOB 개체를 URL로 만드는 데 사용됩니다.


URL.createObjectURL() 메서드는 주어진 객체를 가리키는 URL을 DOMString으로 변환합니다.


URL은 생성한 창의 문서가 사라지면 사라집니다.

revokeObjectURL

createObjectURL을 통해 생성된 url이 브라우저가 존재하는 동안 revokeObjectURL 메소드로 url을 무효화하지 않으면 js 엔진이 가비지 콜렉션을 하지 않고 변수가 남아 메모리 누수가 발생합니다.


그렇기 때문에 URL 사용을 중지할 때 revokeObjectURL 메서드를 사용하여 더 이상 이 객체를 메모리에 보유할 필요가 없음을 브라우저에 알려야 합니다.

'추천 관련글,

예를 들어 보겠습니다.

<body>
  <form>
    <p>
      <label for="image">Image:</label>
      <br />
      <input type="file" name="image" id="image" accept="image/png, image/jpeg"/>
    </p>
  </form>
  <div id="image_preview">
      <img src="#" />
      <br />
      <a href="#">Remove</a>
  </div>
</body>
(() => {
  const $ = (el) => document.querySelector(el);
  const arr = ('gif', 'png', 'jpg', 'jpeg');
  let blobURL;

  $('#image').addEventListener('change', function(e) {
    const ext = e.currentTarget.value.split('.').pop().toLowerCase(); // 확장자
    if(!
arr.includes(ext)){
       window.alert('이미지 파일이 아닙니다!
 (gif, png, jpg, jpeg 만 업로드 가능)');
       return;
    } else {
      blobURL = window.URL.createObjectURL($('#image').files(0)); //createObjectURL는 매번 호출할 때마다 새로운 객체 URL을 생성합니다.


      $('#image_preview img').setAttribute('src', blobURL);
    }
  });

  //createObjectURL 사용을 종료하려면 revokeObjectURL 메소드를 사용하여 브라우저가 더이상 이 객체를 메모리에 들고 있지 않아도 된다고 알려야합니다.


  $('#image_preview a').addEventListener('click', function() {
    URL.revokeObjectURL(blobURL); //전달한 URL 초기화
    $('#image_preview img').setAttribute('src', '');
    return;
  });
})();

파일 공유

간단한 예시라 html로 한군데만 작업했습니다~
필요하신 분들은 다운받아서 테스트해보세요!
!

index.html
0.00MB


참고링크

URL.createObjectURL() – 웹 API | MDN

URL.createObjectURL() 정적 메서드는 주어진 객체를 가리키는 URL을 DOMString으로 반환합니다.

URL은 생성한 창의 문서가 사라지면 무효가 됩니다.

developer.mozilla.org

이미지 blob 개체를 URL로 변환하고 img, javascript, JavaScript, blob, createObjectUrl, revokeObjectUrl, react, vue,

이미지 blob 개체를 url로 변환하고 img, javascript, JavaScript, blob, createObjectUrl, revokeObjectUrl, react, vue, window, document를 표시합니다.

kyounghwan01.github.io