[JavaScript] JavaScript/자바스크립트로 파일 읽어오기 / 로컬 파일 접근

미니 개인프로젝트로 웹기반 버전관리 시스템을 구현하는 도중에 평소처럼 서버에 요청해서 서버에서 응답을 해주는 방식이 아닌 local에 저장되어 있는 html 또는 text 파일을 javascript로 불러올 필요가 생겼을 때

아래와 같은 방법으로 해결 

실습 예제

---

아래와 같이 HTML 코드를 작성한다.

<button onclick="openTextFile()">Open</button>
<div id="output">File Contents Area</div>

 

그 후 아래와 같이 JavaScript를 작성해준다

function openTextFile(){
    var input = document.createElement("input");
    
    input.type = "file";
    input.accept = "text/plain, text/html, .jsp";
 
   input.click();
   input.onchange = function (event) {
            processFile(event.target.files[0]);
   };
        
}
 
function processFile(file){
    var reader = new FileReader();
    reader.readAsText(file,"UTF-8");
    
    reader.onload = function () {
        output.innerText = reader.result;
    };
}

Open이라고 적힌 버튼을 클릭하면 input 노드를 생성해주고 processFile를 함수를 통해서 선택 된 파일의

텍스트를 받아와 화면에 뿌려줍니다.

 

 

 

 

 

---

 

* 추가로 text파일이나 html 또는 jsp가 아닌 경우 accept 적용 방법입니다.

CSV Files ( .csv )

<input type="file" accept=".csv" />

Excel Files ( .xls )

<input type="file" accept="application/vnd.ms-excel" />

Excel Files ( .xlsx)

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>

Text Files ( .txt )

<input type="file" accept="text/plain"/>

Image Files ( .png, .jpg, etc )

<input type="file" accept="image/*"/>

HTMLFiles ( .html )

<input type="file" accept="text/html"/>

Video Files ( .avi, mpg, mpeg, mp4 )

<input type="file" accept="video/*"/>

Audio Files ( .mp3, wav, etc )

<input type="file" accept="audio/*"/>

PDF Files ( .pdf )

<input type="file" accept=".pdf"/>