Lecture d'un fichier .txt

**aertys** · 25/07/2016, 22h46

bonsoir

je voudrais trouver un moyen de lire et ensuite d'afficher un fichier .txt dans une clef USB. le langage m'importe peu, hormis qu'il doit être coté client pour pouvoir fonctionner sur une clef USB donc bien que je sache c'est beaucoup plus facile en php ou en python je ne peux pas utiliser de langage serveur.

j'ai effectué plusieurs tests en cherchant sur le net mais j'ai rien trouvé d'efficace : pour vous donner des exemples, j'ai d'abord trouvé une solution sur github, celle-ci ne me paraissait pas trop mal, mais j'ai lu dans les commentaires que ça ne marchait pas ; j'ai trouvé une seconde solution avec l'objet FileReader mais soit je n'ai pas très bien compris comment cela marchait soit tout simplement cela ne marchait pas.

l'usage du javascript n'est pas imposé, je l'utilise juste parce que le seul langage web que je connaisse ne nécessitant pas de serveur mais vous pouvez m'en proposer d'autres si vous voyez une solution plus pratique.

d'avance merci

**danielhagnoul** · 26/07/2016, 00h25

Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
    #byte_content {
      margin: 1.2rem;
      padding: 0.6rem;
      border: 1px dotted grey;
    }
  </style>
  <script>
    'use strict';
 
    window.addEventListener( 'load', function( ev ){
 
      function readBlob(){
 
        let
          reader = new FileReader(),
          file = document.querySelector( '#files' ).files[ 0 ],
          blob = file.slice( 0, file.size ),
          content = document.querySelector( '#byte_content' );
 
        reader.readAsText( blob, "utf-8" );
 
        reader.addEventListener( "loadend", function( evt ){
          if ( evt.target.readyState == FileReader.DONE ){
            content.textContent = "";
 
            let
              lines = evt.target.result.split( '\n' ),
              linesLength = lines.length,
              p = null;
 
            for( let line = 0; line < linesLength; line++ ){
              p = document.createElement( "p" );
              p.textContent = lines[ line ];
              content.appendChild( p );
            }
          }
        }, false );
      }
 
      document.querySelector( "#files" ).addEventListener( "change", function( evt ){
        if ( evt.target.files[ 0 ].size > 0 ){
          readBlob();
        }
      }, false );
 
    }, false );
  </script>
</head>
<body>
 
  <input type="file" id="files">
 
  <div id="byte_content"></div>
 
</body>
</html>

**aertys** · 26/07/2016, 11h56

j'ai testé ce code: il m'affiche bien le bouton parcourir sur lequel je clique puis choisis mon fichier .txt. puis il m'affiiiche une ligne vide.
en plus de ça, je ne veux pas demander à l'utilisateur un fichier mais lui en imposer un.

**danielhagnoul** · 26/07/2016, 12h28

Chez moi cela fonctionne très bien.

Il suffit d'ouvrir un fichier '.txt', même s'il se trouve sur une clé USB, et son contenu s'affiche dans le cadre (vide au départ).

Bien entendu, c'est l'utilisateur qui doit choisir le fichier à ouvrir, pas le concepteur de la page web. Ce serait porte ouverte pour tous les pratiquants du côté obscur de la force.