[javascript] 자바스크립트로 파일내용 Uint8Array 인코딩, 디코딩하기

자바스크립트로 파일내용을 Unit8Array 인코딩하고 인코딩한 내용을 다시 디코딩해서 가져올 수 있다.

 

1. input 파일과 encoding, decoding 내용을 가져올 textarea

    <input type="file" id="file"><br>
    Uint8Array encoding<br>
    <textarea id="encode" rows="5" cols="80"></textarea><br>
    Uint8Array decoding<br>
    <textarea id="decode" rows="5" cols="80"></textarea>

 

2. 스크립트 코드

<script>
    window.onload = function(){
        function onFileSelect(event) {
            var file = event.target.files[0];
            console.log(file);
          
            var reader = new FileReader();
            reader.onload = function(e) {
              var encoding = new TextEncoder("UTF-8").encode(e.target.result);
              document.getElementById('encode').value = encoding;

              var decoding = new TextDecoder("UTF-8").decode(e.target.result);
              document.getElementById('decode').value = decoding;

            };
            reader.readAsArrayBuffer(file);
          }
          document.getElementById('file').addEventListener('change', onFileSelect, false);
    }
</script>

파일 내용만 읽어온다면 FileReader객체의 readAsText를 사용할 수 있지만 

Unit8Array를 사용할 경우 readAsArrayBuffer를 사용해야 한다.