JavaScript2018. 7. 4. 13:41

로컬 파일(txt)을 읽어서 안의 내용을 긁어오는 작업을 해야 했다.

파일 내용만 읽어오면 되기 때문에 스크립트 단에서 처리할 수가 있었다.


1.  txt 확장자가 아닌 파일은 불러오지 않게 처리

$('input:file').change(functon(e) {
  var ext = $(this).val(); // 파일 정보를 가져온다.
  ext = ext.substring(ext.lastIndexOf('.') + 1); // 파일 확장자 부분을 가져온다.
  if(ext !== 'txt') {
    alert('txt 파일만 가능합니다.'); 
    return;
  }


2. 파일 내용을 가져와서 처리

  var file = e.target.files[0];
  if(!file) 
    return; 
  var reader = new FileReader();
  reader.onload = function(e) {
    var result = e.target.result;
    // result를 가지고 내용 처리.
  }
  reader.readAsText(file, 'UTF-8');
});


3. 텍스트를 일부 수정한 같은 파일을 불러올 경우 [input:file]의 value값이 동일하므로

  이벤트가 발생하지 않는다. 따라서 다음과 같이 처리해줘야 같은 파일을 다시 부르더라도 적용된다.

  ...
  reader.readAsText(file, 'UTF-8');
  $(this).val('');


Posted by 홍규홍규