Stel je voor dat je webpagina wil communiceren met bestanden op de computer van de gebruiker. HTML-5 biedt een handig hulpmiddel genaamd de File API om dit mogelijk te maken. De File API maakt interactie mogelijk met enkele, meerdere en BLOB-bestanden.
De FileReader API kan worden gebruikt om in samenwerking met een bestand asynchroon te lezen JavaScript afhandeling van evenementen. Niet alle browsers bieden echter HTML 5-ondersteuning, dus het is belangrijk om de browsercompatibiliteit te testen voordat u de File API gebruikt.
Java-afdruk
Er zijn vier ingebouwde methoden in de FileReader API om lokale bestanden te lezen:
- FileReader.readAsArrayBuffer(): Leest de inhoud van het opgegeven invoerbestand. Het resultaatattribuut bevat een ArrayBuffer die de gegevens van het bestand vertegenwoordigt.
- FileReader.readAsBinaryString(): Leest de inhoud van het opgegeven invoerbestand. Het resultaatattribuut bevat de onbewerkte binaire gegevens uit het bestand als een tekenreeks.
- FileReader.readAsDataURL(): Leest de inhoud van het opgegeven invoerbestand. Het resultaatattribuut bevat een URL die de gegevens van het bestand vertegenwoordigt.
- FileReader.readAsText(): Leest de inhoud van het opgegeven invoerbestand. Het resultaatattribuut bevat de inhoud van het bestand als een tekststring. Deze methode kan de coderingsversie als tweede argument gebruiken (indien nodig). De standaardcodering is UTF-8.
Verschillende voorbeelden van het lezen van lokale tekstbestanden met JavaScript:
Voorbeeld 1: Om te demonstreren hoe u de methode FileReader.readAsText() gebruikt om het lokale bestand te lezen.
HTML
Lees Tekstbestandstitel> hoofd> <body> <input type='file' name='inputfile' id='inputfile'> <br> <pre class='hljs' id='output'>voor><script type='text/javascript'>document.getElementById('inputfile') .addEventListener('change', function () { let fr = new FileReader(); fr.onload = function () { document.getElementById('output') . textContent = fr.resultaat; } fr.readAsText(deze.bestanden[0] }) script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</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>Voorbeeld 2:</strong> </b> <span>Om het gebruik van de FileReader.readAsBinaryString()methode te demonstreren om het lokale bestand te lezen.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Lees Tekstbestandstitel> hoofd> <body> <input type='file' name='inputfile' id='inputfile'> <br> <pre class='hljs' id='output'>voor><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(dit.files[0] }) script> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Uitgang:</strong> </b> </p> <img src='//techcodeview.com/img/javascript-questions/25/how-read-local-text-file-using-javascript-2.webp' alt="monster15"><p>Uitvoer</p> <p dir='ltr'><span>JavaScript is vooral bekend voor de ontwikkeling van webpagina's, maar wordt ook gebruikt in verschillende niet-browseromgevingen. U kunt JavaScript vanaf de basis leren door dit te volgen</span> <span>JavaScript-zelfstudie</span> <span>En</span> <span>JavaScript-voorbeelden</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="">Categorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/csharp-basics/">Csharp-Basics</a> </li><li> <a href="/kali-linux-tutorial/">Kali Linux-Zelfstudie</a> </li><li> <a href="/c-programs/">C-Programma's</a> </li><li> <a href="/companies-list/">Bedrijvenlijst</a> </li><li> <a href="/basic-coding-problems/">Basiscoderingsproblemen</a> </li><li> <a href="/anime/">Anime</a> </li><li> <a href="/banking-general-awareness/">Algemeen Bankbewustzijn</a> </li><li> <a href="/online-game-tools/">Online-Game-Tools</a> </li><li> <a href="/aws-tutorial/">Aws-Zelfstudie</a> </li><li> <a href="/24-7-innovation-labs/">24*7 Innovatielabs</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">Natuurkunde-Vragen</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Natuurkunde-Vragen</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/physics-questions/"> <i class="fa fa-external-link"></i> Lees Verder</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikelen</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/hotel-transylvania-full-cast">Hotel Transylvania – Volledige cast en personages</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/who-is-admission-committee-131750">Wie is de toelatingscommissie? Waar zoeken ze naar?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/bash-else-if">Bash Anders Als</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/90-day-calculator-free-online-calculator">90 dagen rekenmachine (data over 90 dagen vanaf nu) – Gratis online rekenmachine</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/diana-ankudinova">Diana Ankoedinova</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">Populaire Berichten</h2>
<div class="content">
<ul class="list"> <li><a href="/how-center-button-css">middelste knop in css</a>
</li><li><a href="/numpy-dot-python">numpy dot-product</a>
</li><li><a href="/java-comparable-interface">java vergelijkbaar</a>
</li><li><a href="/java-constant">Java-constante</a>
</li><li><a href="/comparison-operators">powershell groter dan of gelijk</a>
</li><li><a href="/difference-between-factory">industrie en fabriek</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 Alle Rechten Voorbehouden | <a href="//hu.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij?</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid</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>