J'ai un élément d'interface utilisateur de téléchargement de fichier dans lequel l'utilisateur va télécharger des images. Ici, je dois valider la hauteur et la largeur de l'image du côté client. Est-il possible de trouver la taille de l'image ayant seulement le chemin du fichier dans JS?Get dimensions de l'image en utilisant Javascript lors du téléchargement de fichier
Remarque: Si non, existe-t-il un autre moyen de rechercher les cotes côté client?
Vous pouvez le faire sur les navigateurs qui prennent en charge la nouvelle File API du W3C, en utilisant la fonction readAsDataURL sur l'interface FileReader et attribuer l'URL de données à la src d'un img (après quoi vous pouvez lire le height et width du image). Firefox 3.6 supporte actuellement l'API de fichiers, et je pense que Chrome et Safari l'ont déjà fait ou sont sur le point de le faire.
Ainsi, votre logique au cours de la phase de transition serait quelque chose comme ceci:
détecter si le navigateur prend en charge l'API File (qui est facile: if (typeof window.FileReader === 'function')).
Si c'est le cas, génial, lisez les données localement et insérez-les dans une image pour trouver les dimensions.
Sinon, téléchargez le fichier sur le serveur (en soumettant probablement le formulaire à partir d'un iframe pour éviter de quitter la page), puis interrogez le serveur pour connaître la taille de l'image (ou demandez simplement l'image tu préfères).
Modifier Je voulais travailler jusqu'à un exemple de l'API File pendant un certain temps; en voici un:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show Image Dimensions Locally</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function loadImage() {
var input, file, fr, img;
if (typeof window.FileReader !== 'function') {
write("The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('imgfile');
if (!input) {
write("Um, couldn't find the imgfile element.");
}
else if (!input.files) {
write("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
write("Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
fr = new FileReader();
fr.onload = createImage;
fr.readAsDataURL(file);
}
function createImage() {
img = document.createElement('img');
img.onload = imageLoaded;
img.style.display = 'none'; // If you don't want it showing
img.src = fr.result;
document.body.appendChild(img);
}
function imageLoaded() {
write(img.width + "x" + img.height);
// This next bit removes the image, which is obviously optional -- perhaps you want
// to do something with it!
img.parentNode.removeChild(img);
img = undefined;
}
function write(msg) {
var p = document.createElement('p');
p.innerHTML = msg;
document.body.appendChild(p);
}
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='imgfile'>
<input type='button' id='btnLoad' value='Load' onclick='loadImage();'>
</form>
</body>
</html>
Fonctionne bien sur Firefox 3.6. J'ai évité d'utiliser n'importe quelle bibliothèque là, donc des excuses pour les gestionnaires d'événements de style d'attribut (DOM0) et autres.
Non, Vous ne pouvez pas, nom de fichier et le contenu du fichier sont envoyés au serveur dans http en-tête corps, javascript ne peut pas manipuler ces champs.
Existe-t-il un autre moyen de rechercher les dimensions dans le client? –
Vous devez le télécharger à un autre endroit, le vérifier dans le serveur et récupérer ces valeurs avec ajax – YOU
Je ne suis pas sûr que Flash puisse le faire ou pas, mais l'applet Java devrait être capable de le faire. ou ressemble à html5 pourrait le faire, voir T.J. La réponse de Crowder – YOU
Si vous utilisez un téléchargement basé sur le flash, tel que SWFUpload, vous pouvez obtenir toutes les informations souhaitées ainsi que plusieurs mises en file d'attente.
Je recommande SWFUpload et je ne suis en aucun cas associé à eux en tant qu'utilisateur.
Vous pouvez également écrire un contrôle silverlight pour choisir votre fichier et le télécharger.
+1 a l'air cool! – YOU
Bien sûr, cela nécessite que vos utilisateurs autorisent Flash. Bon nombre d'entre nous bloquent Flash, pour l'instant, à cause de toutes les publicités Flash. –
@TJC accordé, mais jusqu'à ce que HTML5 est omniprésent Flash/ActiveX/Silverlight/XBap est la seule option viable pour ce genre de situation. –
HTML5 est certainement la bonne solution ici. Vous devriez toujours coder pour le futur, pas le passé. La meilleure façon de traiter avec les navigateurs HTML4 est de retombera sur la fonctionnalité dégradée ou utiliser Flash (mais seulement si le navigateur ne supporte pas l'API de fichiers HTML5)
Utilisation de l'événement img.onload vous permettra de récupérer les dimensions du fichier. Son travail pour une application sur laquelle je travaille.
L'exemple précédent est correct, mais il est loin d'être parfait.
var reader = new FileReader();
reader.onload = function(e)
{
var image = new Image();
image.onload = function()
{
console.log(this.width, this.height);
};
image.src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
Cool! Mais dans mon cas, JS écrit dans la console juste après le deuxième clic sur le bouton de téléchargement. Qu'est-ce qui ne va pas? –
Oh, j'ai trouvé une réponse: il devrait s'agir d'un événement 'onchange' de 'onclick' dans l'élément . En tout cas, merci Gajus –
+1, c'est le moyen de le faire. – YOU
Merci pour l'exemple! – Pointy
J'ai utilisé votre solution pour vérifier l'orientation des images avant de les télécharger via iOS Safari (puisque iOS supprime beaucoup de données exif pendant le téléchargement, par exemple l'orientation). J'ai trouvé que les dimensions étaient incorrectes si l'image affichait: aucune (elle confondait largeur et hauteur en mode portrait). Ma façon de le résoudre était de lui donner une position absolue de gauche -10000px ou plus. De toute façon, merci pour votre travail. Cela m'a sauvé de beaucoup de maux de tête supplémentaires. – stafffan