Comment vérifier les dimensions de l'image avant de la télécharger avec JavaScript ?

Vérifiez les dimensions de l'image avant de télécharger avec JavaScript

Pour empêcher les utilisateurs de télécharger des images inappropriées, il est crucial d'établir des mesures de validation avant d'autoriser les téléchargements d'images. Cet article vous guidera tout au long du processus de vérification de la largeur et de la hauteur d'une image en JavaScript.

Code JavaScript existant :

Le code JavaScript fourni vérifie efficacement le type de fichier et taille de l'image téléchargée. Cependant, la validation des dimensions n'est pas encore implémentée.

<code class="javascript">function checkPhoto(target) {
    if(target.files[0].type.indexOf("image") == -1) {
        document.getElementById("photoLabel").innerHTML = "File not supported";
        return false;
    }
    if(target.files[0].size > 102400) {
        document.getElementById("photoLabel").innerHTML = "Image too big (max 100kb)";
        return false;
    }
    document.getElementById("photoLabel").innerHTML = "";
    return true;
}</code>

Mise en œuvre de la validation des dimensions de l'image :

Pour vérifier les dimensions de l'image, nous devons créer manuellement un objet image à partir de le fichier téléchargé. Le code JavaScript suivant fait cela :

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

Démo et compatibilité :

Vous pouvez voir un exemple fonctionnel de ce code sur JSFiddle : http://jsfiddle. net/4N6D9/1/.

Il est important de noter que cette méthode n'est prise en charge que dans certains navigateurs, principalement Firefox et Chrome.

Remarque supplémentaire :

Avant d'utiliser la méthode URL.createObjectURL(), sachez qu'elle est obsolète au profit de l'attribution de flux à HTMLMediaElement.srcObject. Pour plus d'informations, reportez-vous à la documentation officielle.

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!