귀하의 웹 페이지가 사용자 컴퓨터에 있는 파일과 상호 작용하기를 원한다고 상상해 보십시오. HTML5 이를 가능하게 하기 위해 File API라는 편리한 도구를 제공합니다. 파일 API를 사용하면 단일, 다중 및 BLOB 파일과의 상호 작용이 가능합니다.
FileReader API는 다음과 협력하여 비동기적으로 파일을 읽는 데 사용할 수 있습니다. 자바스크립트 이벤트 처리. 그러나 모든 브라우저는 HTML 5를 지원하지 않으므로 File API를 사용하기 전에 브라우저 호환성을 테스트하는 것이 중요합니다.
김프 글꼴 목록
FileReader API에는 로컬 파일을 읽기 위한 4가지 내장 메서드가 있습니다.
- FileReader.readAsArrayBuffer(): 지정된 입력 파일의 내용을 읽습니다. 결과 속성에는 파일 데이터를 나타내는 ArrayBuffer가 포함되어 있습니다.
- FileReader.readAsBinaryString(): 지정된 입력 파일의 내용을 읽습니다. 결과 속성에는 파일의 원시 바이너리 데이터가 문자열로 포함됩니다.
- FileReader.readAsDataURL(): 지정된 입력 파일의 내용을 읽습니다. 결과 속성에는 파일 데이터를 나타내는 URL이 포함되어 있습니다.
- FileReader.readAsText(): 지정된 입력 파일의 내용을 읽습니다. 결과 속성에는 파일 내용이 텍스트 문자열로 포함됩니다. 이 메소드는 인코딩 버전을 두 번째 인수로 사용할 수 있습니다(필요한 경우). 기본 인코딩은 UTF-8입니다.
JavaScript를 사용한 로컬 텍스트 파일 읽기의 다양한 예:
예시 1: FileReader.readAsText() 메서드를 사용하여 로컬 파일을 읽는 방법을 보여줍니다.
HTML
텍스트 읽기 파일제목> 머리글> <body> <input type='file' name='inputfile' id='inputfile'> <br> <pre class='hljs' id='output'>사전><script type='text/javascript'>document.getElementById('inputfile') .addEventListener('change', function () { let fr = new FileReader(); fr.onload = function () { document.getElementById('output') . textContent = fr.result; } fr.readAsText(this.files[0]) }) script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>산출:</strong> </b> </p> <img src='//techcodeview.com/img/javascript-questions/25/how-read-local-text-file-using-javascript.webp' alt=""><p dir='ltr'> <b> <strong>예시 2:</strong> </b> <span>FileReader.readAsBinaryString() 메서드를 사용하여 로컬 파일을 읽는 방법을 보여줍니다.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>텍스트 읽기 파일제목> 머리글> <body> <input type='file' name='inputfile' id='inputfile'> <br> <pre class='hljs' id='output'>사전><script type='text/javascript'>document.getElementById('inputfile') .addEventListener('change', function () { let fr = new FileReader(); fr.onload = function () { document.getElementById('output') . textContent = fr.result; } fr.readAsBinaryString(this.files[0]) }) script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>산출:</strong> </b> </p> <img src='//techcodeview.com/img/javascript-questions/25/how-read-local-text-file-using-javascript-2.webp' alt="샘플15"><p>산출</p> <p dir='ltr'><span>JavaScript는 웹 페이지 개발로 가장 잘 알려져 있지만 브라우저가 아닌 다양한 환경에서도 사용됩니다. 다음을 따르면 JavaScript를 처음부터 배울 수 있습니다.</span> <span>자바스크립트 튜토리얼</span> <span>그리고</span> <span>자바스크립트 예</span> <span>.</span></p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">범주</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/python-numpy-random-sampling/">Python Numpy-임의 샘플링</a> </li><li> <a href="/java-double/">자바-더블</a> </li><li> <a href="/backtracking/">역추적</a> </li><li> <a href="/physics-class-8-cat/">물리-8급</a> </li><li> <a href="/english-grammar/">영문법</a> </li><li> <a href="/csharp-basics/">Csharp 기본 사항</a> </li><li> <a href="/access-modifiers/">액세스 수정자</a> </li><li> <a href="/computer-gk/">컴퓨터 Gk</a> </li><li> <a href="/counting-sort/">계산 정렬</a> </li><li> <a href="/python-pil/">파이썬 알약</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">수학 속의 국방부 | 모양, 예 및 유형</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> 기하학에서 오각형의 세계를 탐험해보세요. 오각형의 정의, 속성 및 다양한 응용에 대해 알아보세요. 오각형의 유형, 각도, 부분을 이해하고 면적과 둘레를 계산하는 공식을 알아보세요.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/pentagon-maths-shape"> <i class="fa fa-external-link"></i> 자세히보기</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">재미있는 기사</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/everything-you-need-know-about-clt-test-1311172">CLT 테스트에 대해 알아야 할 모든 것</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-eop-your-guide-educational-opportunity-programs-1311278">EOP란 무엇입니까? 교육 기회 프로그램 가이드</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-algorithm-function-equal">C++ 알고리즘 함수 equal()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/test-case-generation-set-5-generating-random-sorted-arrays-and-palindromes">테스트 케이스 생성 | 세트 5(임의로 정렬된 배열 및 회문 생성)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sum-of-subset-differences">하위 집합 차이의 합</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">인기 게시물</h2>
<div class="content">
<ul class="list"> <li><a href="/convert-java-object-json">Java에서 json에 대한 객체</a>
</li><li><a href="/css-bold-text">CSS에서 굵게 표시</a>
</li><li><a href="/typescript-foreach">타이프 스크립트 각각</a>
</li><li><a href="/how-align-images-css">CSS 이미지 정렬</a>
</li><li><a href="/java-do-while-loop">java do while 예제</a>
</li><li><a href="/how-access-android-settings-menu">설정 메뉴 열기</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 판권 소유 | <a href="//fi.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">부인 성명</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">회사 소개</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">개인 정보 보호 정책</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>