Comment vérifier la largeur et la hauteur de l'image avant de la télécharger avec Javascript ?

Vérifiez la largeur et la hauteur de l'image avant de la télécharger avec Javascript

Avant que les utilisateurs puissent télécharger une image sur une application Web, il est essentiel de valider ses dimensions pour garantir la compatibilité avec les exigences d’affichage souhaitées. Ce code Javascript fournit une solution pour vérifier la largeur et la hauteur de l'image avant d'autoriser la soumission du fichier :

<code class="javascript">var _URL = window.URL || window.webkitURL;
$(&quot;#file&quot;).change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
        img = new Image();
        var objectUrl = _URL.createObjectURL(file);
        img.onload = function () {
            if (this.width < 240 || this.height < 240) {
                alert("Image too small (min 240x240)");
            } else {
                // Validation passed
                // Proceed with upload
            }
            _URL.revokeObjectURL(objectUrl);
        };
        img.src = objectUrl;
    }
});</code>

Ce code crée un objet image à partir du fichier choisi par l'utilisateur. L'événement "onload" de l'objet image est utilisé pour obtenir la largeur et la hauteur, qui sont ensuite comparées aux dimensions minimales souhaitées. Si l'image répond aux critères, la validation réussit, permettant au téléchargement de se poursuivre. Dans le cas contraire, une alerte s'affiche, informant l'utilisateur que l'image est trop petite.

Remarque : Il est important de considérer que certains navigateurs, tels que Safari, peuvent ne pas prendre en charge la méthode URL.createObjectURL(). Pour la compatibilité entre navigateurs, des méthodes alternatives doivent être explorées si nécessaire.

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!