JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<input type='file' id='fichierEntre'/>
<button id='boutonCharger'>Affiche-moi le contenu du fichier</button>
<div id="sortie"></div>

JavaScript

/**
 * Lit et affiche dans une div idSortie le contenu du fichier sélectionné par l’utilisateur par un <input type="file" id=idInputFile
 * 
 * @param idInputFile chaîne identifiant de l’input file
 * @param idSortie chaîne identifiant de la div de sortie
 */
function chargerFichier(idInputFile, idSortie) {
    "use strict";
    var entree, fichier, fr;

    if (typeof window.FileReader !== "function") {
        alert("L’API file n’est pas encore supportée par votre navigateur.");
        return;
    }

    entree = document.getElementById(idInputFile);
    if (!entree.files[0]) {
        alert("S’il vous plaît sélectionnez un fichier avant de cliquer sur «Chargement».");
    } else {
        fichier = entree.files[0];
        fr = new FileReader();
        fr.onload = function () {
            document.getElementById(idSortie).innerHTML = fr.result;
        };
        fr.readAsText(fichier);
    }
}

window.onload = function () {
    "use strict";
    document.getElementById("boutonCharger").onkeyup = function () {
        chargerFichier("fichierEntre", "sortie");
    };
    document.getElementById("boutonCharger").onclick = function () {
        chargerFichier("fichierEntre", "sortie");
    };
};