Comment récupérer les dimensions de l'image pour la validation du téléchargement en JavaScript ?

Vérification des dimensions des images pour le téléchargement avec Javascript

Lors de la mise en œuvre de formulaires de téléchargement d'images en Javascript, il est essentiel de s'assurer que les images téléchargées répondent aux exigences de taille spécifiques. . Cet article explore un problème courant rencontré lors de la validation de la taille de l'image : récupérer la largeur et la hauteur de l'image sélectionnée.

Le problème

La fonction Javascript suivante, conçue pour vérifier le type et la taille du fichier ne parviennent pas à récupérer les dimensions de l'image :

<code class="javascript">function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        // Code to handle file type
    }
    if(target.files[0].size > 102400) {
        // Code to handle image size
    }
    // No code yet for image width and height
}</code>

La solution

Pour récupérer les dimensions de l'image, nous devons créer un objet image à partir du fichier sélectionné . Ceci peut être réalisé en utilisant la méthode URL.createObjectURL() :

<code class="javascript">var _URL = window.URL || window.webkitURL;
$(function() {
    $("#file").change(function (e) {
        var file, img;
        if ((file = this.files[0])) {
            img = new Image();
            var objectUrl = _URL.createObjectURL(file);
            img.onload = function () {
                console.log(this.width + " " + this.height);
                _URL.revokeObjectURL(objectUrl);
            };
            img.src = objectUrl;
        }
    });
});</code>

Cet extrait de code crée un objet Image et charge le fichier sélectionné à l'aide de img.src. Une fois l'image chargée, la fonction de rappel img.onload est exécutée, où nous pouvons accéder à la largeur et à la hauteur de l'image.

Note de compatibilité

L'URL.createObjectURL( ) n’est pas universellement prise en charge par tous les navigateurs. Il est principalement pris en charge dans Firefox et Chrome. Pour d'autres navigateurs, des méthodes alternatives peuvent être nécessaires pour la validation de la taille de l'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!