본문 바로가기

dev/자바스크립트

Javascript FileReader

csv 파일이나 txt 파일을 서버에 업로드하는 경우

 

각 파일에 맞는 maven 라이브러리가 필요합니다.

 

라이브러리를 추가해서 진행하는 것이 어렵지 않으나

 

클라이언트에서 직접 데이터를 보내줄 수 있습니다.

 

자바스크립트 FileReader 클래스를 사용하면 클라이언트가 직접 데이터를 읽을 수 있습니다.

 

예제 코드

 

위의 예제 코드는 클라이언트로 csv 파일이나 txt 파일을 받아 파일 내용을 출력하는 것입니다.

 

주의해야 할 점은 파일을 읽을 때 읽는 작업이 다 끝나야 내용을 확인할 수 있다는 점입니다.(19~27라인)

 

나머지 코드는 주석을 참고하시면 됩니다.

 

예제 코드 결과 화면

 

예제에서 csv 파일을 첨부하면 해당 파일의 내용이 출력되는 점을 확인할 수 있습니다.

 

FileReader에 대한 API는 아래 링크에서 확인하시면 됩니다.

 

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

 

FileReader - Web APIs | MDN

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.

developer.mozilla.org

 

해당 예제 파일 첨부했습니다.

 

필요하신 분들은 다운로드하시면 됩니다.

 

readFile.html
0.00MB

'dev > 자바스크립트' 카테고리의 다른 글

javascript async await  (0) 2023.02.10
excel download  (0) 2022.05.22
jquery deferred  (0) 2022.04.10
브라우저 현재 위치 조회  (0) 2021.12.24
배열 추가 삭제  (0) 2021.09.17