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="//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="">Catégorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/kinematics/">Cinématique</a> </li><li> <a href="/java-multithreading/">Java-Multithreading</a> </li><li> <a href="/c-keyword/">Mot-Clé C</a> </li><li> <a href="/html-dom/">Html-Dom</a> </li><li> <a href="/java-keyword/">Mot-Clé Java</a> </li><li> <a href="/best-websites/">Meilleurs Sites Web</a> </li><li> <a href="/spark-tutorial/">Tutoriel Spark</a> </li><li> <a href="/accenture/">Accenture</a> </li><li> <a href="/b-tree/">Arbre B</a> </li><li> <a href="/c-programs/">Programmes C</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">Aire du losange : formule, dérivation et exemples</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> L'aire d'un losange est définie comme la quantité d'espace entourée par un losange dans un plan bidimensionnel. Trouvez la définition, la formule et les méthodes pour calculer l'aire du losange, ainsi que des exemples résolus dans cet article.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/area-rhombus-formula"> <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="/css-display-property">Propriété d'affichage CSS</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-prospective-student-131128">Qu’est-ce qu’un futur étudiant ?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/taking-input-python">Prendre des entrées en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/minterm-maxterm">Minterm et Maxterm</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-activate-full-screen-mode-google-chrome">Comment activer le mode plein écran dans Google Chrome</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="/java-hashset">jeu de hachage Java</a>
</li><li><a href="/java-each-loop-enhanced">amélioré pour la boucle Java</a>
</li><li><a href="/knuth-morris-pratt-algorithm">algorithme kmp</a>
</li><li><a href="/java-naming-convention">convention de dénomination de Java</a>
</li><li><a href="/what-is-star-topology">topologie en étoile</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="//uk.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>