Obtenir les dimensions de l'image en utilisant Javascript pendant le téléchargement du fichier
J'ai upload de fichier élément de l'INTERFACE utilisateur, dans lequel l'utilisateur d'uploader des images. Ici, je dois valider la hauteur et la largeur de l'image à côté client. Est-il possible de trouver la taille de l'image ayant uniquement le chemin d'accès au fichier en JS?
Remarque: Si Non, est-il un autre moyen pour trouver les dimensions à côté Client?
source d'informationauteur Gopi | 2010-05-19
Vous devez vous connecter pour publier un commentaire.
Vous pouvez le faire sur les navigateurs qui prennent en charge la nouvelle Fichier API du W3C, à l'aide de la
readAsDataURL
fonction de laFileReader
interface et d'affecter les données de l'URL de lasrc
d'unimg
(après quoi vous pouvez lire lesheight
etwidth
de l'image). Actuellement Firefox 3.6 prend en charge les Fichiers de l'API, et je pense que Chrome et Safari soit déjà ou sont sur le point d'.Donc votre logique au cours de la phase de transition serait quelque chose comme ceci:
Détecter si le navigateur prend en charge le Fichier API (ce qui est facile:
if (typeof window.FileReader === 'function')
).Si elle le fait, bien, lire les données en local et de l'insérer dans une image pour trouver les dimensions.
Si pas, télécharger le fichier sur le serveur (probablement de la soumission du formulaire à partir d'une iframe pour éviter de laisser la page), puis interroger le serveur pour demander comment taille que l'image est (ou tout simplement demander de l'image téléchargée, si vous préférez).
Modifier j'ai eu l'intention de travailler jusqu'à un exemple de Fichier de l'API pour un certain temps; en voici un:
Fonctionne très bien sur Firefox 3.6. J'ai évité d'utiliser n'importe quelle bibliothèque il y a, alors, toutes mes excuses pour l'attribut (DOM0) de style et des gestionnaires d'événements.
L'exemple précédent est Correct, mais il est loin d'être parfait.
Non, Vous ne pouvez pas, nom de fichier et le contenu du fichier est envoyé sur le serveur http
en-têtecorps, javascript ne peut pas manipuler les champs.Si vous utilisez un flash téléchargé comme SWFUpload vous pouvez disposer de toutes les informations que vous voulez ainsi que plusieurs en file d'attente des téléchargements.
Je recommande SWFUpload et je suis en aucun cas associé avec eux autrement que comme un utilisateur.
Vous pouvez également écrire un contrôle silverlight pour sélectionner votre fichier et le télécharger.
HTML5 est certainement la bonne solution ici.
Vous devriez toujours code pour l'avenir, pas le passé.
La meilleure façon de traiter avec HTML4 navigateurs est soit de se rabattre sur dégradés de la fonctionnalité ou de l'utilisation de Flash (mais seulement si le navigateur ne supporte pas le HTML5 fichier API)
À l'aide de l'img.événement onload vous permettra de récupérer les dimensions du fichier.
Son travail pour une application que je suis en train de travailler sur.