Imagineu que la vostra pàgina web vol interactuar amb els fitxers de l'ordinador de l'usuari. HTML 5 proporciona una eina útil anomenada File API per fer-ho possible. L'API de fitxers permet la interacció amb fitxers únics, múltiples i BLOB.
L'API FileReader es pot utilitzar per llegir un fitxer de manera asíncrona en col·laboració amb JavaScript gestió d'esdeveniments. Tanmateix, tots els navegadors no tenen compatibilitat amb HTML 5, per la qual cosa és important provar la compatibilitat del navegador abans d'utilitzar l'API de fitxers.
svm
Hi ha quatre mètodes integrats a l'API FileReader per llegir fitxers locals:
- FileReader.readAsArrayBuffer(): Llegeix el contingut del fitxer d'entrada especificat. L'atribut resultat conté un ArrayBuffer que representa les dades del fitxer.
- FileReader.readAsBinaryString(): Llegeix el contingut del fitxer d'entrada especificat. L'atribut resultat conté les dades binàries en brut del fitxer com a cadena.
- FileReader.readAsDataURL(): Llegeix el contingut del fitxer d'entrada especificat. L'atribut de resultat conté un URL que representa les dades del fitxer.
- FileReader.readAsText(): Llegeix el contingut del fitxer d'entrada especificat. L'atribut resultat conté el contingut del fitxer com a cadena de text. Aquest mètode pot prendre la versió de codificació com a segon argument (si cal). La codificació per defecte és UTF-8.
Diferents exemples de lectura de fitxers de text locals mitjançant JavaScript:
Exemple 1: Per demostrar l'ús del mètode FileReader.readAsText() per llegir el fitxer local.
HTML
Llegiu Títol del fitxer de text> cap> <body> <input type='file' name='inputfile' id='inputfile'> <br> <pre class='hljs' id='output'>pre><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>Sortida:</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>Exemple 2:</strong> </b> <span>Per demostrar l'ús del mètode FileReader.readAsBinaryString() per llegir el fitxer local.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Llegiu Títol del fitxer de text> cap> <body> <input type='file' name='inputfile' id='inputfile'> <br> <pre class='hljs' id='output'>pre><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>Sortida:</strong> </b> </p> <img src='//techcodeview.com/img/javascript-questions/25/how-read-local-text-file-using-javascript-2.webp' alt="mostra 15"><p>Sortida</p> <p dir='ltr'><span>JavaScript és més conegut per al desenvolupament de pàgines web, però també s'utilitza en una varietat d'entorns que no són de navegador. Podeu aprendre JavaScript des de la base seguint això</span> <span>Tutorial de JavaScript</span> <span>i</span> <span>Exemples de JavaScript</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="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/webtech-tools/">Webtech-Tools</a> </li><li> <a href="/cpp-strings-library/">Cpp-Cadenes-Biblioteca</a> </li><li> <a href="/java-exceptions/">Java-Excepcions</a> </li><li> <a href="/chemistry-class-9-cat/">Química-Class-9</a> </li><li> <a href="/stack/">Pila</a> </li><li> <a href="/java-control-flow/">Java-Control-Flow</a> </li><li> <a href="/logarithms/">Logaritmes</a> </li><li> <a href="/jquery-methods/">Jquery-Mètodes</a> </li><li> <a href="/c-20-cat/">C++ 20</a> </li><li> <a href="/web-technologies-difference-between/">Tecnologies Web: Diferència Entre</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">Formes geomètriques en matemàtiques</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Les formes geomètriques fan referència a figures o formes que es poden descriure mitjançant funcions i propietats matemàtiques. Obteniu informació sobre diversos tipus de formes geomètriques i les seves propietats amb techcodeview.com</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/geometric-shapes-maths"> <i class="fa fa-external-link"></i> Llegir Més</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articles D'Interès</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/factorial-python">factorial() a Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/quine-in-python">Quine en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/implement-rand12-using-rand6-in-one-line">Implementeu rand12() utilitzant rand6() en una línia</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/bash-while-loop">Bash While Loop</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/multiplication-two-matrices-single-line-using-numpy-python">Multiplicació de dues matrius en una línia utilitzant Numpy en Python</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">Entrades Populars</h2>
<div class="content">
<ul class="list"> <li><a href="/binary-tree-java">arbre binari en java</a>
</li><li><a href="/typescript-arrow-function">funció de fletxa mecanografiada</a>
</li><li><a href="/how-split-strings-c">divisió de cadenes en c++</a>
</li><li><a href="/collections-java">col·lecció java</a>
</li><li><a href="/arp-commands">comanda de Windows arp</a>
</li><li><a href="/immutable-list-java">llista immutable</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 Tots Els Drets Reservats | <a href="//uk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa</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>