JS - 파일API : FileReader() 객체

FileReader() 객체는 비동기적으로 파일의 내용을 읽어들이는 데 사용됩니다. 형식은 다음과 같습니다.

var reader = new FileReader();

속 성	설 명
error	읽기 도중에 에러가 발생한 경우 NOT_FOUND_ERR: 1 읽을 파일을 찾지 못했을 때 SECURITY_ERR: 2 읽을 파일에 변경이 있을 때 ABORT_ERR: 3 읽기가 중지되었을 때 NOT_READABLE_ERR: 4 파일에 접근할 수 없을 때 ENCODING_ERR: 5 Data URL 길이가 상한을 초과했을 때
readyState	파일의 상태를 숫자로 표현 EMPTY: 0 아직 데이터가 로드되지 않았음 LOADING: 1 데이터가 로딩 중… DONE: 2 읽기 요청이 완료됨
result	파일의 내용을 반환

함께 사용할 수 있는 이벤트 핸들러와 메소드는 다음 표와 같습니다.

이벤트	설 명
onload	읽기 동작이 성공적으로 완료되었을 때 발생
onerror	읽기 동작에 에러가 생길 때마다 발생
onabort	읽기 동작이 중단될 때마다 발생
onloadstart	읽기 동작이 실행될 때마다 발생
onloadend	읽기 동작이 끝났을 때마다 발생 (읽기 성공이나 실패 여부와 상관없이 발생)
onprogress	컨텐트를 읽는 동안 호출

메소드	설 명
.abort()	읽기 요청을 중단시킴. (readyState 는 DONE이 됨)
.readAsDataURL()	바이너리 파일을 Base64 Encode 문자열로 반환 Ex.) data:image/jpeg; base64, GDYG….
.readAsText()	텍스트 파일을 읽어 들임. file: 읽어 들일 파일. 필수 사항 charset: 문자 코드. 기본값 UTF-8

.readAsText()

이 메소드는 텍스트 파일의 내용을 읽어 들일 때 사용됩니다. 이벤트는 onload 가 사용되었습니다.

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

    var reader = new FileReader();
    reader.onload = function(){
      console.log(reader.result);
    };
    reader.readAsText(data.files[0]);
  };
</script>

다음은 좀 더 복잡하게 구성해 보겠습니다. 파일을 선택하고, 전송을 클릭하면 파일 내용이 <textarea> 에 출력되는 예제입니다. 여기서 charset 을 생략하였기 때문에 기본값 UTF-8 로 설정됩니다.

<input type="file" id="userfile" name="usefile" value="">
<input type="button" id="submit" value="전송">
<textarea cols="50" rows="10"></textarea>

<script>
var btn = document.getElementById("submit");
btn.addEventListener("click", function(){

 var items = '';
 var reader = new FileReader();
 var data = document.getElementById("userfile").files[0];
 

 // 읽기 동작이 완료되었을 때...
 reader.addEventListener('load', function(){
  document.getElementsByTagName("textarea")[0].value = reader.result;
 });
 // 파일 읽기에 오류가 있으면..
 reader.addEventListener('error', function(){
  console.log(reader.error.message);
 });
 // 파일을 문자열로 읽어 들임
 reader.readAsText(data);

});
</script>

.readAsDataURL()

readAsDataURL() 는 바이너리 파일을 읽어 들일 때 사용됩니다. 바이너리 파일을 읽어 들이기 위해 readAsText 대신 readAsDataURL 를 사용하면 예제와 같이 base64 로 이루어진 데이터를 반환받을 수 있습니다.

<img src="data:image/jpeg;base64, RFT188094Hv....">

이렇게 취득된 문자열로 이미지를 브라우저로 바로 출력시키면 사용자는 해당 이미지를 동적으로 확인할 수 있습니다.

<input type='file' accept='image/*' onchange='Reader(event)'><br>
<img id='output'>
<script>
  var Reader = function(event) {
    var data = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };
    reader.readAsDataURL(data.files[0]);
  };
</script>

다음은 복잡하게 구성해 보겠습니다.

<input type="file" id="userfile" name="usefile" value="">
<input type="button" id="submit" value="전송">
<img src="">

<script>
var btn = document.getElementById("submit");
btn.addEventListener("click", function(){

 var items = '';
 var reader = new FileReader();
 var data = document.getElementById("userfile").files[0];
 

 // 읽기 동작이 완료되었을 때...
 reader.addEventListener('load', function(){
  document.getElementsByTagName("img")[0].src = reader.result;
 });
 // 파일 읽기에 오류가 있으면..
 reader.addEventListener('error', function(){
  console.log(reader.error.message);
 });
 // 파일을 base64 로 읽어 들임
 reader.readAsDataURL(data);

});
</script>

error 속성

파일을 읽기 도중 오류가 발생하면 각 해당하는 상수를 이용해 오류를 제어할 수 있습니다.

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

readyState 속성

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]);

  /*
  결과:
    Before read: EMPTY
    After read: LOADING
    After load: DONE
  */
};
</script>

출처: https://www.javascripture.com/FileReader