How to Verify Image Dimensions Before Uploading with JavaScript?

Verify Image Dimensions Before Uploading with JavaScript

To prevent users from uploading unsuitable images, it is crucial to establish validation measures before allowing image uploads. This article will guide you through the process of checking an image's width and height in JavaScript.

Existing JavaScript Code:

The provided JavaScript code effectively checks the file type and size of the uploaded image. However, dimension validation is not yet implemented.

<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>

Implementation of Image Dimension Validation:

To verify image dimensions, we need to manually create an image object from the uploaded file. The following JavaScript code does this:

<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>

Demo and Compatibility:

You can view a working example of this code on JSFiddle: http://jsfiddle.net/4N6D9/1/.

It is important to note that this method is only supported in certain browsers, primarily Firefox and Chrome.

Additional Note:

Before using the URL.createObjectURL() method, be aware that it has been deprecated in favor of assigning streams to HTMLMediaElement.srcObject. For additional information, refer to the official documentation.

The above is the detailed content of How to Verify Image Dimensions Before Uploading with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!