귀하의 웹 페이지가 사용자 컴퓨터에 있는 파일과 상호 작용하기를 원한다고 상상해 보십시오. 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="/css-properties/">Css 속성</a> </li><li> <a href="/maths/">수학</a> </li><li> <a href="/physical-quantities/">물리적 수량</a> </li><li> <a href="/cpp-basics/">Cpp 기본</a> </li><li> <a href="/shortest-path/">최단 경로</a> </li><li> <a href="/physics-difference-between/">물리학-차이-사이</a> </li><li> <a href="/temples/">사원</a> </li><li> <a href="/mockito-tutorial/">모키토 튜토리얼</a> </li><li> <a href="/linux-shell-commands/">Linux 쉘 명령</a> </li><li> <a href="/merge-sort/">병합 정렬</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">Snap 지도에서 내 위치 설정을 업데이트하는 방법</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Snapchat의 최신 업데이트에는 새로운 위치 공유 기능이 포함되어 있습니다. Snap Map을 사용하면 다음을 볼 수 있습니다.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-update-my-location-settings-snap-map-24224"> <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="/how-read-local-text-file-using-javascript">JavaScript를 사용하여 로컬 텍스트 파일을 읽는 방법은 무엇입니까?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-arrays">파이썬 배열</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-act-out-1311292">ACT는 무엇입니까?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-list-size-method">Java 목록 크기() 메서드</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/create-pandas-dataframe-from-lists">목록에서 Pandas DataFrame 만들기</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="/how-sort-tuple-python">파이썬 정렬 튜플</a>
</li><li><a href="/git-origin-master">git pull 오리진 마스터</a>
</li><li><a href="/java-convert-string-int">문자열을 int로 변환하는 방법</a>
</li><li><a href="/how-center-button-css">CSS 중앙 버튼</a>
</li><li><a href="/numpy-linspace">np.linspace</a>
</li><li><a href="/hadoop-tutorial">하둡 튜토리얼</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="//pl.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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>