Afficher un aperçu de l'image avant le téléchargement
Dans mon formulaire HTML, j'ai une entrée déposée avec le fichier de type par exemple:
<input type="file" multiple>
Ensuite, je sélectionne plusieurs fichiers en cliquant sur ce bouton d'entrée. Maintenant, je veux montrer un aperçu des images sélectionnées avant de soumettre le formulaire . Comment faire cela en HTML 5?
3 réponses
HTML5 est livré avec File API spec , qui vous permet de créer des applications qui permettent à l'utilisateur d'interagir avec les fichiers localement; cela signifie que vous pouvez charger des fichiers et les rendre dans le navigateur sans avoir à télécharger les fichiers. Une partie de L'API de fichier est l'interface FileReader qui permet aux applications web de lire de manière asynchrone le contenu des fichiers .
Voici un exemple rapide qui utilise la classe FileReader pour lire une image en tant que DataURL et rend une vignette par définition de l'attribut src d'une balise image sur une URL de données:
Le code html:
<input type="file" id="files" />
<img id="image" />
Le code JavaScript:
document.getElementById("files").onchange = function () {
var reader = new FileReader();
reader.onload = function (e) {
// get loaded data and render thumbnail.
document.getElementById("image").src = e.target.result;
};
// read the image file as a data URL.
reader.readAsDataURL(this.files[0]);
};
Voici un bon article sur en utilisant les API de fichiers en JavaScript .
L'extrait de code de L'exemple HTML ci-dessous filtre les images de la sélection de l'utilisateur et rend les fichiers sélectionnés en plusieurs aperçus miniatures:
function handleFileSelect(evt) {
var files = evt.target.files;
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML =
[
'<img style="height: 75px; border: 1px solid #000; margin: 5px" src="',
e.target.result,
'" title="', escape(theFile.name),
'"/>'
].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);<input type="file" id="files" multiple />
<output id="list"></output>Ici, je l'ai fait avec jQuery en utilisant L'API FileReader.
Balisage Html:
<input id="fileUpload" type="file" multiple />
<div id="image-holder"></div>
JQuery:
Ici, dans le code jQuery, je vérifie d'abord l'extension de fichier. c'est-à-dire fichier image valide à traiter, puis vérifiera si le support du navigateur FileReader API est oui alors seulement traité sinon afficher un message respecté
$("#fileUpload").on('change', function () {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var image_holder = $("#image-holder");
image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof (FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Pls select only images");
}
});
function handleFileSelect(evt) {
var files = evt.target.files;
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML =
[
'<img style="height: 75px; border: 1px solid #000; margin: 5px" src="',
e.target.result,
'" title="', escape(theFile.name),
'"/>'
].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);<input type="file" id="files" multiple />
<output id="list"></output>