En trainant sur le net j’ai trouvé un petit tuto qui explique comment faire la miniature d’une image en HTML5 sans uploader le fichier. L’image est afficher a coté du champ input.
La première étape et de créer un formulaire avec un champ input de type file et une balise output pour afficher la miniature..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 File Reader</title>
</head>
<body>
<input type="file" id="files" />
<output id="out"></output>
<script>
</script>
</body>
</html>
Viens ensuite la partie javascript. Avant toute chose, Il faut vérifié que le navigateur supporte l’API FileReader.
if (window.FileReader) {
function handleFileSelect(evt) {
} else {
alert('Ce navigateur ne supporte pas FileReader');
}
Une fois cela fait un event listener est ajouté afin de mettre à jour la miniature lors de la sélection d’une nouvelle image.
document.getElementById('files').addEventListener('change', handleFileSelect, false);
Pour finir nous construisons la miniature grâce a l’image que nous récupérons par l’API FileReader.
function handleFileSelect(evt) {
var files = evt.target.files;
var f = files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
document.getElementById('out').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50"/>'].join('');
};
})(f);
reader.readAsDataURL(f);
}
Le fichier final est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 File Reader</title>
</head>
<body>
<input type="file" id="files" />
<output id="out"></output>
<script>
if (window.FileReader) {
function handleFileSelect(evt) {
var files = evt.target.files;
var f = files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
document.getElementById('out').innerHTML = ['<img src="', e.target.result,'" title="', theFile.name, '" width="50"/>'].join('');
};
})(f);
reader.readAsDataURL(f);
}
} else {
alert('Ce navigateur ne supporte pas FileReader');
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
Pour le voir en action c’est par ici.