반응형
JavaScript 코드 (script.js)
document.getElementById('fileInput').addEventListener('change', function(event) {
const file = event.target.files[0]; // 선택된 파일 가져오기
if (file) {
const reader = new FileReader(); // FileReader 객체 생성
reader.onload = function(e) {
// 파일이 성공적으로 읽힌 경우
const text = e.target.result;
document.getElementById('fileContent').textContent = text; // 파일 내용 화면에 출력
};
reader.onerror = function(e) {
// 파일 읽기 중 오류 발생 시
document.getElementById('fileContent').textContent = '파일 읽기 오류가 발생했습니다.';
};
reader.readAsText(file); // 파일을 텍스트 형식으로 읽기
} else {
document.getElementById('fileContent').textContent = '파일을 선택하지 않았습니다.';
}
});
HTML 구조
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Read File with JavaScript</title>
<style>
#fileContent {
border: 1px solid #ccc;
padding: 10px;
margin-top: 20px;
white-space: pre-wrap; /* To preserve whitespace and line breaks */
}
</style>
</head>
<body>
<h1>파일 내용 읽기</h1>
<input type="file" id="fileInput" accept=".txt">
<div id="fileContent"></div>
<script src="script.js"></script>
</body>
</html>
- input type="file": 사용자가 파일을 선택할 수 있는 입력 필드입니다.
- div id="output": 읽어들인 파일의 내용을 표시할 영역입니다.
- script.js: JavaScript 코드를 작성할 외부 파일을 연결합니다.
파일 내용 읽기
0
1
2
3
4
5
6
7
8
9
10
반응형
'디지털 라이프' 카테고리의 다른 글
| 블로그 지수·순위 확인, 무료 도구 총정리 (그리고 그 숫자의 진짜 의미) (0) | 2026.07.13 |
|---|---|
| 세상을 떠난 뒤의 계정들 — 구글·애플·네이버·카카오 '디지털 유산' 정리 가이드 (0) | 2026.07.10 |
| 와이파이(Wi-Fi) 아이콘이 사라졌을때 (0) | 2023.09.10 |
| FRP 안드로이드 구글락 해제(이 기기는 재설정되었습니다) (4) | 2022.01.11 |
| 네트워크 공유폴더 ID PW 안먹을때 (0) | 2020.03.31 |
