반응형
1. 준비사항
- 텍스트 파일(예: sample.txt)을 준비합니다. 내용은 간단한 텍스트로 작성해 두시면 됩니다.
- HTML, JavaScript에 대한 기본 지식
- 파일을 직접 선택해 내용을 표시하기 위한 HTML 코드 작성
2. 코드 (주석 포함)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>File API로 로컬 파일 읽기</title>
</head>
<body>
<h2>File API를 사용한 로컬 파일 읽기</h2>
<input type="file" id="fileInput" />
<button onclick="loadFile()">파일 불러오기</button>
<div id="fileContent">
<p>선택한 파일의 내용이 여기에 표시됩니다.</p>
</div>
<script>
// 파일 불러오기 함수 정의
function loadFile() {
// 파일 입력 요소에서 파일 가져오기
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0]; // 첫 번째 파일 선택
if (file) {
// FileReader 객체 생성
const reader = new FileReader();
// 파일을 텍스트로 읽기
reader.onload = function(e) {
// 파일 내용 출력
document.getElementById('fileContent').innerHTML = `<p>${e.target.result}</p>`;
};
// 파일 읽기 시작
reader.readAsText(file);
} else {
document.getElementById('fileContent').innerHTML = `<p>파일을 선택해주세요.</p>`;
}
}
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>File API로 로컬 파일 읽기</title>
</head>
<body>
<h2>File API를 사용한 로컬 파일 읽기</h2>
<input type="file" id="fileInput" />
<button onclick="loadFile()">파일 불러오기</button>
<div id="fileContent">
<p>선택한 파일의 내용이 여기에 표시됩니다.</p>
</div>
<script>
// 파일 불러오기 함수 정의
function loadFile() {
// 파일 입력 요소에서 파일 가져오기
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0]; // 첫 번째 파일 선택
if (file) {
// FileReader 객체 생성
const reader = new FileReader();
// 파일을 텍스트로 읽기
reader.onload = function(e) {
// 파일 내용 출력
document.getElementById('fileContent').innerHTML = `<p>${e.target.result}</p>`;
};
// 파일 읽기 시작
reader.readAsText(file);
} else {
document.getElementById('fileContent').innerHTML = `<p>파일을 선택해주세요.</p>`;
}
}
</script>
</body>
</html>
3. 주요 기능 설명 및 흐름
- loadFile() 함수: 파일을 불러오기 위해 버튼 클릭 시 호출됩니다.
- File Input 요소: 사용자가 직접 파일을 선택할 수 있는 <input type="file"> 요소입니다. 이곳에서 선택한 파일이 JavaScript로 전달됩니다.
- FileReader 객체 생성: JavaScript의 FileReader 객체를 사용하여 파일을 텍스트 형식으로 읽어 옵니다.
- reader.onload 이벤트: 파일이 성공적으로 읽혀질 경우 onload 이벤트가 트리거되며, 파일의 내용을 <div id="fileContent"> 영역에 표시합니다.
- 오류 처리: 파일이 선택되지 않았을 경우 메시지를 표시하여 사용자가 파일을 선택하도록 안내합니다.
4. 결과 미리보기
- "파일 불러오기" 버튼을 클릭하면 sample.txt 파일의 내용이 <div id="fileContent"> 영역에 표시됩니다.
- 파일이 선택되지 않았거나 읽기 오류가 발생하면 경고 메시지가 나타납니다.
5. 추가 팁 및 주의사항
- 텍스트 형식 제한: 이 예제는 텍스트 파일을 읽는 데 적합합니다. 다른 파일 형식을 사용할 경우 FileReader.readAsDataURL 등의 메서드를 고려하세요.
- 파일 선택 이벤트: 파일을 선택하는 input 요소에 change 이벤트 리스너를 추가하면 버튼 클릭 없이 파일 선택 시 자동으로 파일을 읽도록 구현할 수도 있습니다.
- 보안 문제: File API는 보안상의 이유로 로컬 파일을 웹 페이지가 자동으로 접근하지 못하게 합니다. 사용자가 파일을 직접 선택해야 한다는 점을 참고하세요.
반응형
'자바스크립트' 카테고리의 다른 글
| 키보드 자판 연습 내가 누르는 키를 보여주면서 화면에 출력하기 (0) | 2023.12.17 |
|---|---|
| 매매 로봇: 주식 시장 데이터를 분석하여 자동으로 주식을 매매하는 로봇을 만듭니다. (0) | 2023.12.17 |
| 게시판 및 댓글 시스템: 웹 페이지에 게시글을 작성하고 댓글을 달 수 있는 시스템을 만듭니다. (0) | 2023.12.17 |
| 바코드/QR 코드 생성기: 텍스트나 링크를 바코드 또는 QR 코드로 변환하는 도구를 만듭니다. (0) | 2023.12.17 |
| 마음의 소리 분석: 마이크를 사용하여 사용자의 목소리를 분석하고 그래프로 표시합니다. (0) | 2023.12.17 |