JavaScript로 업로드되기 전에 이미지 미리보기

보안상의 이유로 브라우저는 입력을 통해 선택한 이미지 파일의 경로에 대한 액세스를 허용하지 않습니다. 즉, 브라우저의 JavaScript는 파일 시스템에 액세스할 수 없습니다. 따라서 우리의 임무는 서버나 다른 곳으로 보내기 전에 입력을 통해 선택한 이미지 파일을 미리 보는 것입니다.

방법 1:URL 클래스 사용:

URL 클래스의 createObjectURL() 함수를 사용하여 입력에 의해 선택된 이미지의 URL을 생성한 다음 해당 URL을 img 태그의 src 속성에 제공할 수 있습니다.

예시

이에 대한 코드는 -

<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
   const previewImage = e => {
      const preview = document.getElementById('preview');
      preview.src = URL.createObjectURL(e.target.files[0]);
      preview.onload = () => URL.revokeObjectURL(preview.src);
   };
</script>

방법 2:FileReader 클래스 사용:

이 메서드는 에서 가져온 파일을 구문 분석한 다음 이미지의 base64 표현을 포함하는 문자열을 생성합니다.

예시

이에 대한 코드는 -

<img id="preview"/>
<input type="file" accept="image/*" onchange="previewImage(event)">
<script>
   const previewImage = e => {
      const reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]);
      reader.onload = () => {
         const preview = document.getElementById('preview');
         preview.src = reader.result;
      };
   };
</script>

출력

두 방법의 출력은 다음과 같습니다. -