Prévisualisation du fichier html local dans le navigateur

Question

J'ai une page web où un utilisateur peut télécharger des fichiers. Il peut sélectionner le fichier à télécharger avec <t:inputFileUpload> jsf (Cette balise est semblable à la balise d'entrée HTML standard avec la balise type="file" ).

Je veux ajouter une fonction d'aperçu.

lorsqu'un utilisateur sélectionne un fichier (exemple : html ), il pourrait prévisualiser son fichier html local.

Je sais qu'il y a un "problème" avec les raisons de restriction de sécurité des navigateurs.

Ma première solution consiste à charger le fichier de la machine locale de l'utilisateur sur le serveur, puis à créer un lien vers ce fichier sur le serveur. Le problème est qu'il y a un risque sur mon serveur, Peut-être que ce fichier est corrompu...

Quelqu'un a une idée et une solution pour cet avenir ?

Answer 1

Voici un simple JSFiddle qui montre un aperçu de html des dossiers. Je l'ai créé à partir du tutoriel trouvé aquí .

La partie du code la plus utile pour vous est la suivante

var f = // uploaded file.
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
    return function(e) {
         // Render the file.
         $("#preview").html(e.target.result);
    };
})(f);

// Read in the html file as text.
reader.readAsText(f);

Cela utilise le HTML5 FileReader pour lire et afficher le contenu du html fichier.