Lire un fichier texte

**yuyu599** · 30/10/2018, 14h28

Bonjour le forum !
Je cherche un code pour lire un fichier texte tout simplement, le fichier "test.txt" dans une page de mon site, c'est possible à faire ? Est-il mieux d'un point de vue technique d'utiliser du javascript ou un iframe html ?
Merci à vous :-)

**psychadelic** · 30/10/2018, 15h43

1 - dans quel contexte ? sous nodeJS, sous un navigateur branché sur un serveur ?

2 - ou se trouve ce fichier texte ?
sur le serveur ? sur le poste local ?

3- conseil de lecture : http://lyc-sevres.ac-versailles.fr/e...e.integral.pdf

**yuyu599** · 30/10/2018, 15h54

Bonjour,
Merci de votre réponse.
Dans une simple page html avec un fichier texte situé au même endroit que la page html et sur un server.

Invité · 30/10/2018, 17h18

Bonjour,

Envoyé par yuyu599

...utiliser du javascript ou un iframe html ?...

La solution la plus simple sera un iframe html.

**Marco46** · 30/10/2018, 17h42

On peut faire ça en traitant le fichier texte comme une ressource comme une autre.

La MDN donne un exemple avec l'API Fetch.

**javatwister** · 30/10/2018, 18h01

si tu as un accès php, c'est encore plus simple:

Code :

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

1
2
$fichier=file_get_contents("fichier.txt");
echo $fichier;

Ce qui nous éloigne pas mal de javascript...

**yuyu599** · 30/10/2018, 21h39

Oh oui ca fonctionne en php :-)
Merci beaucoup :-)
Par contre le fichier texte contient des accents qui ne passent pas dans ma page html, comment y remédier ?

**psychadelic** · 30/10/2018, 23h31

tu parles de quoi ?

de iso-8859-1, iso-8859-15, utf-8 ???

1- en quoi est encodé ta page html ? et est-ce que l'encodage y est bien indiqué ???
2 - en quoi est encodé ton fichier texte ?

il faut utiliser le même encodage pour la page html et pour ton texte.

exemple:

Code html :

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

1
2
3
4
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />

Code PHP :

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

1
2
3
4
5
<?php	
header('Content-Type: text/html; charset=utf-8');
echo file_get_contents("fichier.txt");
exit(0);
?>

il faut aussi ajouter les entêtes http correspondants dans le code php.

=> "les" parce que tu peux aussi avoir d'autres problèmes, comme pour le cache par exemple, mais j'imagine que ce sera la question suivante ? (qui pourrait être mieux renseignée pour changer? )

**yuyu599** · 31/10/2018, 03h15

Bonjour,
Merci de vos réponses.
En faites je ne peux pas utiliser du php ( même si la méthode fonctionne) car je suis sous wordpress avec un theme particulier, le php fait bugger.
Je dois donc avoir recours au javascript uniquement grr
Voici le code pour afficher le texte :

Code :

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
<div class="cat" id="cat-1-B"Texte cat1-A> </div>
<div class="cat" id="cat-1-B"Texte cat1-B> </div>
	<div class="cat" id="cat-1-C">Texte cat1-C</div>
	<div class="cat" id="cat-1-D">Texte cat1-D</div>
	<div class="cat" id="cat-1-E">Texte cat1-E</div>
 
	<div class="cat" id="cat-2-A">Texte cat2-A</div>
	<div class="cat" id="cat-2-B">Texte cat2-B</div>
	<div class="cat" id="cat-2-C">Texte cat2-C</div>
	<div class="cat" id="cat-2-D">Texte cat2-D</div>
	<div class="cat" id="cat-2-E">Texte cat2-E</div>
 
	<div class="cat" id="cat-3-A">Texte cat3-A</div>
	<div class="cat" id="cat-3-B">Texte cat3-B</div>
	<div class="cat" id="cat-3-C">Texte cat3-C</div>
	<div class="cat" id="cat-3-D">Texte cat3-D</div>
	<div class="cat" id="cat-3-E">Texte cat3-E</div>

J'ai mis la version courte car il y a 22 catégories oO si il y a un moyen d'éviter de répéter autant je suis preneur aussi genre afficher le fichier "catX-Y.txt" ou x varie de 1 à 22 et Y de 1 à 5.

Merci à vous :-)

Invité · 31/10/2018, 08h30

Bonjour,

Envoyé par yuyu599

...En faites je ne peux pas utiliser du php ( ...) car je suis sous wordpress ..., le php fait bugger.
Je dois donc avoir recours au javascript uniquement grr

Au lieu de dire n'importe quoi (par manque de connaissance) : donne-nous tout de suite les bonnes informations, et des explications CLAIRES !

1- tu utilises WordPress : tu aurais pu le dire dès le début !!
WordPress utilise du PHP.

2- ce n'est pas parce que TU ne sais pas l'utiliser correctement qu'il faut abandonner la méthode.

3- MONTRE TON CODE !

C'est pénible de répéter sans arrêt la même chose...

4- si le code que tu montres ci-dessus est celui du fichier "texte", alors renomme-le en HTML, et fais un include PHP.

**Christophe** · 31/10/2018, 11h39

tu utilises WordPress : tu aurais pu le dire dès le début !!

Tout à fait.

Regardes du coté du plugin WP import, comme ça tu n'auras pas de code à gérer. Si cela convient à ta situation.

**yuyu599** · 31/10/2018, 13h20

Désolé ca ne partait pas d'une mauvaise intention.
Voici mon projet alors :
L'utilisateur arrive sur ma page wordpress, il fait 1 choix parmi 22 dans une premiere liste, en fonction de son choix une image s'affiche.
Puis il dois faire un choix parmi 5 dans une seconde liste liée et affiche le texte en fonction de son choix qui est lié au choix de la liste 1 et 2, texte à affiché = choixliste1-choixliste2
Voici mon code complet qui marche mais mes textes sont insérés directement dans le code alors que j'aimerais bien faire les appeler via un fichier extérieur, c'est à dire que j'ai 22*5 textes soit 110 textes différents et donc 110 fichiers.txt sous la forme choix1-choix2.txt
Voici mon code en version simplifié pour n'avoir que 3 choix dans la première liste au lieu de 22:

Code :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
 
<script type="text/javascript">
          function catsel2(sel) {
            //if (sel.value=="-1" ) return;
            var opt=sel.getElementsByTagName("option" );
            for (var i=0; i<opt.length; i++) {
              var x=document.getElementById(opt[i].value);
              if (x) x.style.display="none";
            }
            var cat = document.getElementById(sel.value);
            if (cat) cat.style.display="block";
          }
        </script>
 
<script>
function catsel(sel_id1,sel_id2) 
{
        // on récupère les 2 choix
        var sel_1_val = document.getElementById( sel_id1 ).value;
        var sel_2_val = document.getElementById( sel_id2 ).value;
 
        // on masque tous les div de class="cat"
        cat_hide_all();
 
        // si les 2 choix sont faits
        if( sel_1_val !='' && sel_2_val !='' )
        {
                // on affiche le bon div
                var cat_to_show_id = 'cat-' + sel_1_val + '-' + sel_2_val; // de la forme : cat-2-C
                var cat_to_show = document.getElementById( cat_to_show_id );
                if (cat_to_show) cat_to_show.style.display = 'block';
        }
}
// masquer tous les div
function cat_hide_all() 
{
        var divs = document.querySelectorAll( '.cat' );
        divs.forEach(function(div) {
                div.style.display = 'none';
        });
}
// ONLOAD : on masque tous les div de class="cat"
window.onload = cat_hide_all;
</script>
 
<style type="text/css">
.cat { 
        border:1px dashed #ccc; padding:20px; margin-top:20px; 
        display:none; /* on masque au départ */
}
</style>
 
 
 
<select id="select_id1" onchange="catsel('select_id1', 'select_id2'),catsel2(this);">
	<option value="">...choisissez...</option>
	<option value="1">Choix 1</option>
	<option value="2">Choix 2</option>
	<option value="3">Choix 3</option>
 
</select>
 
 
 
<select id="select_id2" onchange="catsel('select_id1', 'select_id2');">
	<option value="">...choisissez...</option>
	<option value="A">Choix A</option>
	<option value="B">Choix B</option>
	<option value="C">Choix C</option>
	<option value="D">Choix D</option>
	<option value="E">Choix E</option>
</select>
  <div id="1" style="display:block">
              <img src="1.jpg" width="100%" height="550"/></div>
              <div id="2" style="display:none">
                <img src="2.jpg" width="300" height="594"/>
              </div>
              <div id="3" style="display:none">
                <img src="3.jpg" width="300" height="594"/>
              </div>
 
 
 
 
    <div class="cat" id="cat-1-A">Texte cat1-A</div>
	<div class="cat" id="cat-1-B">Texte cat1-B </div>
	<div class="cat" id="cat-1-C">Texte cat1-C</div>
	<div class="cat" id="cat-1-D">Texte cat1-D</div>
	<div class="cat" id="cat-1-E">Texte cat1-E</div>
 
	<div class="cat" id="cat-2-A">Texte cat2-A</div>
	<div class="cat" id="cat-2-B">Texte cat2-B</div>
	<div class="cat" id="cat-2-C">Texte cat2-C</div>
	<div class="cat" id="cat-2-D">Texte cat2-D</div>
	<div class="cat" id="cat-2-E">Texte cat2-E</div>
 
	<div class="cat" id="cat-3-A">Texte cat3-A</div>
	<div class="cat" id="cat-3-B">Texte cat3-B</div>
	<div class="cat" id="cat-3-C">Texte cat3-C</div>
	<div class="cat" id="cat-3-D">Texte cat3-D</div>
	<div class="cat" id="cat-3-E">Texte cat3-E</div>

Qu'en pensez vous ? Et encore désolé pour le manque d'explication au départ je ne recommencerai plus :-)

**psychadelic** · 31/10/2018, 15h31

Envoyé par yuyu599

Qu'en pensez vous ? Et encore désolé pour le manque d'explication au départ je ne recommencerai plus :-)

ben c'est mal parti,
et on à toujours pas la réponse à mes question...

Envoyé par psychadelic

tu parles de quoi ?

de iso-8859-1, iso-8859-15, utf-8 ???

1- en quoi est encodé ta page html ? et est-ce que l'encodage y est bien indiqué ???
2 - en quoi est encodé ton fichier texte ?

Invité · 31/10/2018, 16h07

...110 fichiers.txt...

Crée un fichier JS, avec dedans un objet contenant toutes les combinaisons.
Ce sera quand même nettement plus facile à gérer !

**yuyu599** · 31/10/2018, 16h11

Alors je suis en utf 8 pour ma page ^^
Pas d'encodage spécifié sur le fichier texte par contre.

Par contre pour créer un fichier js avec les combinaisons je ne sais pas par ou démarrer en faites oO

Merci de vos réponses !

Invité · 31/10/2018, 16h31

Je t'avais pourtant donné un code dans cette discussion !

Il restait juste l'affichage des photos !
Ce qui est loin d'être le plus compliqué...

Invité · 31/10/2018, 17h21

Bon.
Je t'ai écrit un script COMPLET, en un seul fichier JS : https://codepen.io/jreaux62/pen/GYbeGO

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
<select id="select-id1">
	<option value="">...choisissez...</option>
	<option value="1">Choix 1</option>
	<option value="2">Choix 2</option>
	<option value="3">Choix 3</option>
 
</select>
<select id="select-id2">
	<option value="">...choisissez...</option>
	<option value="a">Choix A</option>
	<option value="b">Choix B</option>
	<option value="c">Choix C</option>
	<option value="d">Choix D</option>
	<option value="e">Choix E</option>
</select>
 
<div id="affiche-image"><img src="" alt=""/></div>
 
<div id="affiche-texte"></div>

Code JavaScript :

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
66
67
68
69
70
71
72
73
74
75
76
// ------------
function get_image_texte_from_sel() 
{
  // ------------
  // 0- défintion des images et des textes
  var les_images = {
    '1':{src:'image-1.jpg',alt:'image 1'},
    '2':{src:'image-2.jpg',alt:'image 2'},
    '3':{src:'image-3.jpg',alt:'image 3'},
    // ......
  };
  var les_textes = {
    '1-a':{txt:'ceci est le texte de la cat1-A'},
    '1-b':{txt:'ceci est le texte de la cat1-B'},
    '1-c':{txt:'ceci est le texte de la cat1-C'},
    '1-d':{txt:'ceci est le texte de la cat1-D'},
    '1-e':{txt:'ceci est le texte de la cat1-E'},
    // ---
    '2-a':{txt:'ceci est le texte de la cat2-A'},
    '2-b':{txt:'ceci est le texte de la cat2-B'},
    '2-c':{txt:'ceci est le texte de la cat2-C'},
    '2-d':{txt:'ceci est le texte de la cat2-D'},
    '2-e':{txt:'ceci est le texte de la cat2-E'},
    // ---
    '3-a':{txt:'ceci est le texte de la cat3-A'},
    '3-b':{txt:'ceci est le texte de la cat3-B'},
    '3-c':{txt:'ceci est le texte de la cat3-C'},
    '3-d':{txt:'ceci est le texte de la cat3-D'},
    '3-e':{txt:'ceci est le texte de la cat3-E'},
    // ---
    // ......
  };
  // ------
  var sel_id1 = document.querySelector( '#select-id1' );
  var sel_id2 = document.querySelector( '#select-id2' );
  // ------
  var affiche_image = document.querySelector( '#affiche-image' );
  var affiche_image_img = document.querySelector( '#affiche-image img' );
  var affiche_texte = document.querySelector( '#affiche-texte' );
  // ------
  // 1- on récupère les 2 choix
  var sel_1_val = sel_id1.value;
  var sel_2_val = sel_id2.value;
  // ------------
  // 2- si le premier choix est fait : on affiche la bonne image
  var image_name = sel_1_val.toString(); // chaine
  // on affiche le bon TEXTE
  if( les_images[image_name] )
  {
    affiche_image_img.src = les_images[image_name].src;
    affiche_image_img.alt = les_images[image_name].alt;
    affiche_image.style.display = 'block';
  } else {
    affiche_image_img.src = '';
    affiche_image_img.alt = '';
    affiche_image.style.display = 'none';
  }
  // ------------
  // 3- si les 2 choix sont faits : on affiche le bon texte
  var texte_name = sel_1_val.toString()+'-'+sel_2_val.toString(); // chaine
  texte_name = texte_name.toLowerCase(); // on met en minuscules
  // on affiche le bon TEXTE
  if( les_textes[texte_name] )
  {
    affiche_texte.textContent = les_textes[texte_name].txt;
    affiche_texte.style.display = 'block';
  } else {
    affiche_texte.textContent = '';
    affiche_texte.style.display = 'none';
  }
  // ------------
}
// ------------
document.querySelector( '#select-id1' ).addEventListener('change', get_image_texte_from_sel);
document.querySelector( '#select-id2' ).addEventListener('change', get_image_texte_from_sel);
// ------------

Il ne te reste plus qu'à remplir les variables les_images et les_textes.

N.B. Si les textes contiennent des balises HTML, il faut remplacer

Code JavaScript :

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

      affiche_texte.textContent = les_textes[texte_name].txt;

par

Code JavaScript :

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

      affiche_texte.innerHTML = les_textes[texte_name].txt;

**psychadelic** · 31/10/2018, 17h57

Envoyé par yuyu599

Pas d'encodage spécifié sur le fichier texte par contre.

Tous les fichiers texte utilisent un encodage.
si ton texte ne s'affiche pas correctement

Par contre le fichier texte contient des accents qui ne passent pas dans ma page html, comment y remédier ?

c'est parce que l'encodage est différent.
le réglage de l'encodage se fait dans les préférences du logiciel de traitement de texte qui à servi pour les créer.
visiblement le réglage par défaut de ce traitement de texte n'est pas de l'UTF8.

quel logiciel est-ce ?
quel est le réglage par défaut de ce traitement de texte ?
sous windows c'est souvent un iso-8859-xx, et sous mac ils ont aussi un encodage à eux, mais depuis OSX 9 (?) je sais pas s'ils on changé.
es tu sous mac os x ?

Il y a plusieurs questions dans ce message

**yuyu599** · 31/10/2018, 23h38

Bonjour !
Un énorme merci jreaux62 !
Tu déchires à mort ! ( désolé j'ai pas trouvé mieux comme expression )
Cela fonctionne super bien !
Un vrai pro :-)
J'aurais par contre une petite question, selon toi est-il possible de supprimer :

Code :

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
 var les_textes = {
    '1-a':{txt:'ceci est le texte de la cat1-A'},
    '1-b':{txt:'ceci est le texte de la cat1-B'},
    '1-c':{txt:'ceci est le texte de la cat1-C'},
    '1-d':{txt:'ceci est le texte de la cat1-D'},
    '1-e':{txt:'ceci est le texte de la cat1-E'},
    // ---
    '2-a':{txt:'ceci est le texte de la cat2-A'},
    '2-b':{txt:'ceci est le texte de la cat2-B'},
    '2-c':{txt:'ceci est le texte de la cat2-C'},
    '2-d':{txt:'ceci est le texte de la cat2-D'},
    '2-e':{txt:'ceci est le texte de la cat2-E'},
    // ---
    '3-a':{txt:'ceci est le texte de la cat3-A'},
    '3-b':{txt:'ceci est le texte de la cat3-B'},
    '3-c':{txt:'ceci est le texte de la cat3-C'},
    '3-d':{txt:'ceci est le texte de la cat3-D'},
    '3-e':{txt:'ceci est le texte de la cat3-E'},
    // ---
    // ......

Pour inclure une fonction javascript qui lit le fichier correspondant du type choix1-choix2.txt ?
Le but étant d'alléger le code sur la page pour permettre un chargement plus rapide de la page ce qui est seo friendly.

Concernant l'encodage "psychadelic" tu avais raison un grand merci à toi, je me suis mis en UTF8 pour ma page html et mon fichier texte cela fonctionne super bien !
Un grand merci grâce à vous j'avance, vous êtes adorables!

Invité · 01/11/2018, 00h04

Tu peux créer un fichier JS "spécial" (appelé avec <script....>), dans lequel tu définis :

Code :

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
 const les_textes = {
    '1-a':{txt:'ceci est le texte de la cat1-A'},
    '1-b':{txt:'ceci est le texte de la cat1-B'},
    '1-c':{txt:'ceci est le texte de la cat1-C'},
    '1-d':{txt:'ceci est le texte de la cat1-D'},
    '1-e':{txt:'ceci est le texte de la cat1-E'},
    // ---
    '2-a':{txt:'ceci est le texte de la cat2-A'},
    '2-b':{txt:'ceci est le texte de la cat2-B'},
    '2-c':{txt:'ceci est le texte de la cat2-C'},
    '2-d':{txt:'ceci est le texte de la cat2-D'},
    '2-e':{txt:'ceci est le texte de la cat2-E'},
    // ---
    '3-a':{txt:'ceci est le texte de la cat3-A'},
    '3-b':{txt:'ceci est le texte de la cat3-B'},
    '3-c':{txt:'ceci est le texte de la cat3-C'},
    '3-d':{txt:'ceci est le texte de la cat3-D'},
    '3-e':{txt:'ceci est le texte de la cat3-E'},
    // ---
    // ......

Et que tu "appelles" AVANT l'autre fichier JS.
Si ça facilite les modif. (la maintenance), c'est OK.

Ou encore, créer un(des) fichier(s) "de config :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function get_config_images()
{
...
return the_images;
}
 
function get_config_textes()
{
...
return the_textes;
}

Remarque : pour les images, j'ai mis :

Code :

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

1
2
    '1':{src:'image-1.jpg',alt:'image 1'},
...

Cette syntaxe (objet) permet de définir le src (URL de l'image) mais aussi l'attribut alt.
Et, pourquoi pas, un tilte?

J'ai utilisé la même syntaxe pour le texte.

Envoyé par yuyu599

..Le but étant d'alléger le code sur la page pour permettre un chargement plus rapide de la page ce qui est seo friendly...

Tu ne vas RIEN alléger.
Il faut ce qu'il faut.
Ni plus, ni moins.

Sinon, il faut passer à l'Ajax (si la quantité de données à traiter le nécessite).

Lire un fichier texte

WordPress PHP

Discussions similaires

Partager

Partager