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="//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="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/git/">Git</a> </li><li> <a href="/java-date-time/">Java-Data-Hora</a> </li><li> <a href="/webtech-tools/">Webtech-Tools</a> </li><li> <a href="/uncategorized/">Sense Categoria</a> </li><li> <a href="/data-structures-hash/">Estructures De Dades-Hash</a> </li><li> <a href="/arduino-tutorial/">Tutorial Arduino</a> </li><li> <a href="/python-numpy-linear-algebra/">Python Numpy-Àlgebra Lineal</a> </li><li> <a href="/javascript-misc/">Javascript-Misc</a> </li><li> <a href="/max-flow/">Flux Màxim</a> </li><li> <a href="/python-modules/">Mòduls Python</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">Com instal·lar PIP a Windows?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal d'informàtica per a frikis. Conté articles d'informàtica i programació ben escrits, ben pensats i ben explicats, proves i preguntes pràctiques/programació competitiva/entrevistes d'empresa.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-install-pip-windows"> <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="/bash-scripting-difference-between-zsh">Bash Scripting: diferència entre Zsh i Bash</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/css-basics/">Css-Basics</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/linear-search-vs-binary-search">Cerca lineal vs cerca binària</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-clear-cache-windows-10">Com esborrar la memòria cau a Windows 10?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-remove-special-characters-from-string-java">Com eliminar caràcters especials de la cadena a Java</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="/factorial-program-java">java factorial</a>
</li><li><a href="/list-makeup-items">nom dels productes de maquillatge</a>
</li><li><a href="/connection-interface">connexions en java</a>
</li><li><a href="/c-algorithm-function-equal">cpp és igual</a>
</li><li><a href="/difference-between-des">aes vs des</a>
</li><li><a href="/java-regex">regex en 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 Tots Els Drets Reservats | <a href="//lv.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>