JavaScript에서 텍스트 파일 읽기
Kushank Singh
2023년1월30일
JavaScript를 사용하면 웹 페이지에서 요소를 동적으로 읽고 표시할 수 있습니다. 이 튜토리얼에서는 JavaScript에서 텍스트 파일을 읽는 방법을 배웁니다.
blob.text() 함수를 사용하여 JavaScript에서 텍스트 파일 읽기
Blob 인터페이스의 blob.text() 메서드는 UTF-8로 해석되는 blob의 내용을 포함하는 문자열로 확인되는 약속을 전달합니다. 로컬 파일을 읽는 데 사용할 수 있습니다.
<input> 태그를 사용하여 필요한 파일을 선택할 수 있습니다. 파일을 선택한 후 blob.text() 함수를 사용하여 내용을 읽습니다. 웹 페이지에 출력을 표시합니다.
다음 코드를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<title>Read Text File Tutorial</title>
</head>
<body>
<input type="file" onchange="loadFile(this.files[0])">
<br>
<pre id="output"></pre>
<script>
async function loadFile(file) {
let text = await file.text();
document.getElementById('output').textContent = text;
}
</script>
</body>
</html>
위의 예에서 file 유형의 입력 필드를 생성하여 파일을 입력으로 제공할 수 있습니다. 그런 다음 <pre> 태그를 지정했습니다. HTML에서 <pre> 요소는 웹 브라우저가 무시하는 텍스트 공백, 줄 바꿈, 탭 및 기타 서식 지정 문자를 포함하는 미리 서식이 지정된 텍스트 블록을 지정하는 데 사용됩니다. JavaScript 코드는 <script> 태그 내에 있습니다.
FileReader 인터페이스를 사용하여 JavaScript에서 텍스트 파일 읽기
FileReader 개체를 사용하면 웹 응용 프로그램이 사용자 컴퓨터에 저장된 파일(또는 원시 데이터 버퍼)의 내용을 비동기적으로 읽을 수 있습니다. FileReader.readAsText() 메서드를 사용하여 텍스트 파일을 읽습니다.
예를 들어,
<!DOCTYPE html>
<html>
<head>
<title>Read Text File Tutorial</title>
</head>
<body>
<input type="file" name="inputFile" id="inputFile">
<br>
<pre id="output"></pre>
<script type="text/javascript">
document.getElementById('inputFile').addEventListener('change', function() {
var file = new FileReader();
file.onload = () => {
document.getElementById('output').textContent = file.result;
}
file.readAsText(this.files[0]);
});
</script>
</body>
</html>