Le Glisser-Déposer de fichier dans une zone texte avec JavaScript
Le code suivant permet d'ouvrir un fichier, de lire son contenu et d'écrire ce contenu dans une zone de texte.
Dès qu'un fichier est glissé déposé, le contenu est affiché. Si un fichier autre qu'un fichier texte (une image par exemple) est glissé déposé le contenu sera illisible.
Cette méthode fonctionne pour Chrome, Edge, Firefox.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Evenement ondrop
et ondragover pour Firefox -->
<textarea id="main-textarea" ondrop="dropHandler(event);" ondragover="event.preventDefault();"></textarea>
<script>
function dropHandler(ev) {
// Evite l'ouverture du fichier texte dans le navigateur
ev.preventDefault();
//Pour chaque fichier
for (var i = 0; i < ev.dataTransfer.files.length; i++) {
// le fichier
file = ev.dataTransfer.files[i];
reader = new FileReader();
reader.onload = function () {
//Ecriture dans la zone de texte
document.getElementById('main-textarea').value = reader.result;
}
//En cas d'erreur
reader.onerror = function () {
console.error("File reader error code = " + reader.error.code);
}
//Lecture du fichier
reader.readAsText(file);
}
}
</script>
</body>
</html>
Commentaires
Enregistrer un commentaire