Bonjour,
Je souhaite intégrer un tableau HTML via du JavaScript qui lit un fichier, csv mais je suis en environnemnt Boostrap V4 et ca pose probleme : le code de lecture du fichier csv refuse de se lancer.

J'ai mis un point d'arrêt dans le JavaScript avec Chrome sur
fileInput.addEventListener('submit', readFile);
j'arrive bien au code mais le readFile ne se lance pas.


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
<div class="container">
      <form class="needs-validation" novalidate>
      <h4>Vous allez pouvoir intégrer ci-dessous, via un fichier texte, les nouveaux clients de votre entreprise... </h4>
      <center><h5>Voici la liste des champs que votre fichier doit contenir</h5></center>
      <div class="form-row">
        <div class="col-xs-8">
          <table id="tableau" class="table table-striped table-hover">
            <tbody>
              <thead>
                  <tr>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th>Code Postal</th>
                    <th>Mail</th>
                    <th>Téléphone</th>
                    <th>Sexe</th>
                  </tr>
              </thead>
              <div id='Chargement_Fichier_Visible'>
              </div>
            </tbody>
        </table>
          <div class="w-40">
 
          <!-- Recuparation du fichier -->
          <div class="col-xs-8">
            <label for="NomClient"></label>
            <input type="file" style="width:80%" name="FileToUpload" class="form-control" id="FileToUpload" required>
          </div>
 
          <label for="nom">Spécifiez le séparateur</label>
          <input type="text" style="width:30%"; class="form-control" id="separator" name="separator" required>
          <div class="valid-feedback">Ok !</div>
          <div class="invalid-feedback">Valeur incorrecte</div>
 
 
          </div>
          <div class="form-row">
            <div class="col-xs-8">
            <br/>
              <button id="IntegrationFichier" type="submit" class="btn btn-success pull-right"> Valider </button>
          </div>
        </div>
        </div>
        </div>
    </form>
</div>


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
<script type="text/javascript">
 
         var fileInput = document.getElementById("IntegrationFichier"),
 
         readFile = function () {
             var reader = new FileReader();
             reader.onload = function () {
                 const ListeDonnees =reader.result;
                 var monTab = ListeDonnees.split('\n');
                 console.log(monTab[1]);
                 var tableau = document.getElementById("tableau");
                 for (var i=0;i<monTab.length;i++)
                 {
                     var ligne = tableau.insertRow(-1)
                     var UneLigneTab=monTab[i].split(',');
                     //
                     var colonne1 = ligne.insertCell(0);
                     colonne1.innerHTML += UneLigneTab[0];
                     //
                     var colonne2 = ligne.insertCell(1);
                     colonne2.innerHTML += UneLigneTab[1];
                     //
                     var colonne3 = ligne.insertCell(1);
                     colonne3.innerHTML += UneLigneTab[2];
                     //
                     var colonne4 = ligne.insertCell(1);
                     colonne4.innerHTML += UneLigneTab[3];
                     //
                     var colonne5 = ligne.insertCell(1);
                     colonne5.innerHTML += UneLigneTab[4];
 
                 }
             };
 
             reader.readAsBinaryString(fileInput.files[0]);
         };
 
         fileInput.addEventListener('submit', readFile);
 
 </script>
J'ajoute que ca marche très bien si je n'utilise pas Bootstap, quel type d'erreur ai je bien pu commettre ?