Imaginez que votre page Web souhaite interagir avec les fichiers sur l'ordinateur de l'utilisateur. HTML5 fournit un outil pratique appelé File API pour rendre cela possible. L'API File permet l'interaction avec des fichiers uniques, multiples ainsi que BLOB.
L'API FileReader peut être utilisée pour lire un fichier de manière asynchrone en collaboration avec Javascript gestion des événements. Cependant, tous les navigateurs ne prennent pas en charge HTML 5, il est donc important de tester la compatibilité du navigateur avant d'utiliser l'API File.
qu'est-ce qu'un caractère spécial
Il existe quatre méthodes intégrées à l'API FileReader pour lire les fichiers locaux :
- FileReader.readAsArrayBuffer() : Lit le contenu du fichier d'entrée spécifié. L'attribut result contient un ArrayBuffer représentant les données du fichier.
- FileReader.readAsBinaryString() : Lit le contenu du fichier d'entrée spécifié. L'attribut result contient les données binaires brutes du fichier sous forme de chaîne.
- FileReader.readAsDataURL() : Lit le contenu du fichier d'entrée spécifié. L'attribut result contient une URL représentant les données du fichier.
- FileReader.readAsText() : Lit le contenu du fichier d'entrée spécifié. L'attribut result contient le contenu du fichier sous forme de chaîne de texte. Cette méthode peut prendre la version d'encodage comme deuxième argument (si nécessaire). L'encodage par défaut est UTF-8.
Différents exemples de lecture de fichiers texte locaux à l'aide de JavaScript :
Exemple 1: Pour démontrer l’utilisation de la méthode FileReader.readAsText() pour lire le fichier local.
HTML
Lire le titre du fichier texte> tête> <body> <input type='file' name='inputfile' id='inputfile'> <br> <pre class='hljs' id='output'>pré><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> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</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>Pour démontrer l’utilisation de la méthode FileReader.readAsBinaryString() pour lire le fichier local.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Lire le titre du fichier texte> tête> <body> <input type='file' name='inputfile' id='inputfile'> <br> <pre class='hljs' id='output'>pré><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> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p> <img src='//techcodeview.com/img/javascript-questions/25/how-read-local-text-file-using-javascript-2.webp' alt="échantillon15"><p>Sortir</p> <p dir='ltr'><span>JavaScript est surtout connu pour le développement de pages Web, mais il est également utilisé dans divers environnements autres que les navigateurs. Vous pouvez apprendre JavaScript à partir de zéro en suivant ceci</span> <span>Tutoriel Javascript</span> <span>et</span> <span>Exemples 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="">Catégorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/maths-calculators/">Maths-Calculatrices</a> </li><li> <a href="/java-inner-class/">Classe Interne Java</a> </li><li> <a href="/markdown-tutorial/">Tutoriel De Démarque</a> </li><li> <a href="/minecraft-guide/">Guide Minecraft</a> </li><li> <a href="/html-tutorial/">Tutoriel Html</a> </li><li> <a href="/java-multithreading/">Java-Multithreading</a> </li><li> <a href="/health-lifestyle/">Santé Et Mode De Vie</a> </li><li> <a href="/sql-tutorial/">Tutoriel Sql</a> </li><li> <a href="/javascript-es/">Javascript-Es</a> </li><li> <a href="/advance-java/">Avancer Java</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">Séparation de chaîne Python()</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portail informatique pour les geeks. Il contient des articles sur l'informatique et la programmation bien écrits, bien pensés et bien expliqués, des quiz et des questions pratiques/de programmation compétitive/d'entretien d'entreprise.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/python-string-split"> <i class="fa fa-external-link"></i> Lire La Suite</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Des Articles Intéressants</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-play-imessage-games-an-android-phone">Comment jouer à des jeux iMessage sur un téléphone Android</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/ap-physics-1-frq-everything-you-need-know-131402">AP Physics 1 FRQ : tout ce que vous devez savoir</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sagittarius-compatibility-131252">Compatibilité Sagittaire : signes et graphiques les plus compatibles</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/difference-between-leopard">Différence entre léopard, guépard et jaguar</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-set-space-between-flexbox">Comment définir l'espace entre la Flexbox ?</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">Articles Populaires</h2>
<div class="content">
<ul class="list"> <li><a href="/what-is-special-character">qu'est-ce qu'un caractère spécial</a>
</li><li><a href="/java-string">fonctions de chaîne en Java</a>
</li><li><a href="/an-array-strings-c">tableau de chaînes en c</a>
</li><li><a href="/what-is-full-form-pvr">pvr complet</a>
</li><li><a href="/mysql-show-users-list-all-users">mysql afficher tous les utilisateurs</a>
</li><li><a href="/mysql-tutorial">pas</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 Tous Les Droits Sont Réservés | <a href="//ro.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité</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>