[Javascript] 이미지 업로드

이미지 파일 업로드 시 썸네일도 같이 볼 수 있는 Javascript 코드를 구현했다. 

1. 이미지 파일 업로드 HTML 

<div id="image_container"></div>
<input type="file" id="image" accept="image/*" onchange="setThumbnail(event);"/>

<input  type="file"> 속성 중 accept는 어떤 형식의 파일을 허용할 것인지 정해주는 속성이다.

audio/*, video/*, image/* 처럼 지정하거나

. gif,. jpg,. png처럼 파일 확장자로 지정하는 것도 가능하다.

<input type="file" accept="audio/*">
<input type="file" accept="video/*">
<input type="file" accept="image/*">
<input type="file" accept=".gif, .jpg, .png">
<input type="file" accept="image/gif, image/jpeg, image/png">

만약 이미지가 여러개라면 multiple 속성을 추가해주면 된다.

<div id="image_container"></div>
<input type="file" id="image" accept="image/*" onchange="setThumbnail(event);" multiple/>

2. JS 코드 구현

이미지 썸네일 1개

function setThumbnail(event) {
	
    	//FileReader 객체생성
        var reader = new FileReader();
        
        //파일읽는것을 성공했을때 실행
        reader.onload = function(event) {
          var img = document.createElement("img");
          img.setAttribute("src", event.target.result);
          document.querySelector("#image_container").appendChild(img);
        };
		
        //파일 데이터를 URL로 변환
        reader.readAsDataURL(event.target.files[0]);
      }

이미지 썸네일 여러 개

 function setThumbnail(event) {
 		
        //for문 추가
        for (var image of event.target.files) {
          var reader = new FileReader();

          reader.onload = function(event) {
            var img = document.createElement("img");
            img.setAttribute("src", event.target.result);
            document.querySelector("#image_container").appendChild(img);
          };
          reader.readAsDataURL(image);
        }
      }

3. FileReader 설명

FileReader는 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체다.

*blob 객체 : 주로 이미지, 비디오, 사운드 등과 같은 멀티미디어 객체

 

FileReader 객체의 가장 핵심적인 속성은 아래와 같다.

• FileReader.error : 읽기 작업에서 발생한 오류를 설명하는 Error 객체를 가지거나 null 값을 가진다.
• FileReader.readyState : FileReader의 상태를 나타내는 숫자 
  • EMPTY : 0 : 비어있음(Empty)으로 읽기 작업이 수행되지 않았음을 의미. 즉 아직 데이터가 로드되지 않음
  • LOADING : 1 : 데이터가 로딩 중
  • DONE : 2 : 모든 읽기 요청이 완료됨
• FileReader.result : 파일 읽은 결과를 가지고 있거나 null 값을 가진다.

FileReader 이벤트 핸들러

이벤트 핸들러	설명
FileReader.onabort	· onabort 이벤트는 읽기 동작이 중단 될 때마다 발생한다.  · abort 이벤트의 핸들러
FileReader.onerror	· onerror 이벤트는 읽기 동작에 에러가 생길 때마다 발생한다.  · error 이벤트이 핸들러
FileReader.onload	· onload 이벤트는 읽기 동작이 성공적으로 완료 되었을 때마다 발생한다.  · load 이벤트 핸들러
FileReader.onloadstart	· onloadstart 이벤트는 읽기 동작이 실행 될 때마다 발생한다.  · loadstart 이벤트 핸들러
FileReader.onloadend	· onloadend 이벤트는 읽기 동작이 끝났을 때마다 발생한다. ( 읽기의 성공 이나 실패 여부는 상관 없다. )  · loadend 이벤트 핸들러
FileReader.onprogress	· onprogress 이벤트는 Blob를 읽는 동안 호출된다.  · progress 이벤트 핸들러

이벤트 핸들러 사용예시

1.  onloadstart, onloadend

<input type='file' onchange='openFile(event)'>
<script>
  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onloadstart = function() {
      reader.abort();
    };

    reader.onloadend = function() {
      console.log(reader.error.message);
    };

    reader.readAsDataURL(input.files[0]);
  };
</script>

2. onerror

reader.onerror = function(event){
  switch(event.target.error.code){
    case error.NOT_FOUND_ERR:
      alert("파일을 찾을 수 없습니다.");
      break;
    case error.SECURITY_ERR:
      alert("파일에 변경이 있습니다.");
      break;
    case error.NOT_READABLE_ERR:
      alert("파일 읽을 권한이 없습니다."); 
      break;
    case error.ENCODING_ERR:
      alert("파일 허용 용량을 초과하였습니다."); 
      break;
  }
};

3.  readyState 

<input type='file' onchange='openFile(event)'>
<script>
  var stateNames = {};
  stateNames[FileReader.EMPTY]   = 'EMPTY';
  stateNames[FileReader.LOADING] = 'LOADING';
  stateNames[FileReader.DONE]    = 'DONE';

  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      console.log('After load: ' + stateNames[reader.readyState]);
    };

    console.log('Before read: ' + stateNames[reader.readyState]);
    reader.readAsDataURL(input.files[0]);
    console.log('After read: ' + stateNames[reader.readyState]);
  };
</script>

FileReader 메소드

FileReader 객체 생성 후 네 가지 함수 중 하나를 호출하여 File 또는 Blob를 읽어서 result 속성에 저장한다.

메소드(함수)	설명
readAsText( File 또는 Blob 객체 )	파일 객체의 내용을 텍스트로 읽는다. 파일의 내용은 result에 문자열 값으로 들어간다. 즉 파일이 텍스트일때 사용
readAsDataURL( File 또는 Blob 객체 )	파일 객체를 읽은 후 URL로 변환한다. 즉 바이너리 파일을 읽을때, 사용 (ex.이미지 파일)
readAsArrayBuffer( File 또는 Blob 객체 )	파일 객체의 내용을 배열 버퍼로 읽는다.
readAsBinaryString( File 또는 Blob 객체 )	파일 객체의 내용일 비트 문자열로 읽는다.

참고

https://sinna94.tistory.com/entry/JavaScript-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0

JavaScript - 이미지 업로드 미리보기 만들기

https://www.javascripture.com/FileReader

FileReader JavaScript API

https://developer-talk.tistory.com/331

[JavaScript]파일 입출력 - FileReader 객체

 

https://wickedmagica.tistory.com/235

[JavaScript] 이미지 파일 업로드하고 썸네일 생성하기