귀하의 웹 페이지가 사용자 컴퓨터에 있는 파일과 상호 작용하기를 원한다고 상상해 보십시오. 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="//changelesschoir.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="/digital-electronics-adders/">디지털 전자제품 - 가산기</a> </li><li> <a href="/adobe-illustrator/">어도비 일러스트레이터</a> </li><li> <a href="/python-matrix-program/">Python 매트릭스 프로그램</a> </li><li> <a href="/ruby-tutorial/">루비 튜토리얼</a> </li><li> <a href="/red-black-tree/">레드 블랙 트리</a> </li><li> <a href="/html-questions/">Html 질문</a> </li><li> <a href="/culture-gk/">컬쳐Gk</a> </li><li> <a href="/installation-ubuntu/">우분투에 설치</a> </li><li> <a href="/java-strings/">Java 문자열</a> </li><li> <a href="/chemical-formulas/">화학 공식</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="//changelesschoir.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="/gray-code"> <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="/output-of-java-program-set-5">Java 프로그램의 출력 | 세트 5</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cpu-scheduling/">Cpu 스케줄링</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-win-gates-scholarship-131214">게이츠 장학금을 받는 방법</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/css-flex-property">CSS 플렉스 속성</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-dictionary-with-examples">예제가 포함된 C# 사전</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-read-csv-file-java">csv 파일 읽기 자바</a>
</li><li><a href="/java-string-charat">문자열의 문자</a>
</li><li><a href="/java-linkedlist-class">링크드리스트 자바</a>
</li><li><a href="/java-convert-date-string">자바 날짜를 문자열로</a>
</li><li><a href="/list-us-states">미국의 주</a>
</li><li><a href="/mysql-regexp_like-function">mysql의 regexp_like</a>
</li><li><a href="/counter-variable-java">자바 카운터</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="//it.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>