Check image width and height before upload with Javascript

by

The file is just a file, you need to create an image like so:

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;
    }
});

Demo: http://jsfiddle.net/4N6D9/1/

I take it you realize this is only supported in a few browsers. Mostly firefox and chrome, could be opera as well by now.

P.S. The URL.createObjectURL() method has been removed from the MediaStream interface. This method has been deprecated in 2013 and superseded by assigning streams to HTMLMediaElement.srcObject. The old method was removed because it is less safe, requiring a call to URL.revokeOjbectURL() to end the stream. Other user agents have either deprecated (Firefox) or removed (Safari) this feature feature.

For more information, please refer here.

More Related Contents:

  1. Remove selected file(s) before upload with Javascript
  2. How do I make two images fade in/out repeatedly? [closed]
  3. Check if an image is loaded (no errors) with jQuery
  4. Refresh image with a new one at the same url
  5. Changing the image source using jQuery
  6. Should setting an image src to data URL be available immediately?
  7. How to resolve the C:\fakepath?
  8. Client Checking file size using HTML5?
  9. Using JavaScript to display a Blob
  10. Can I prevent the Chrome Developer Tools console from logging image 404 errors? [duplicate]
  11. In Bootstrap open Enlarge image in modal
  12. Draw border around nontransparent part of image on canvas
  13. How do I abort image load requests without using window.stop()
  14. JavaScript Play Uploaded Audio
  15. How to disable Express BodyParser for file uploads (Node.js)
  16. Uploading multiple files asynchronously by blueimp jquery-fileupload
  17. How to flip images horizontally with HTML5
  18. Get image width and height from the Base64 code in JavaScript
  19. Change image in HTML page every few seconds
  20. How to get the image size (height & width) using JavaScript
  21. how express forming the img URL
  22. How to cancel an image from loading
  23. jQuery resize to aspect ratio
  24. copying the value of a form’s file input field to another form’s input field
  25. Using javascript to print images
  26. How to bind img src to data in Vue
  27. How to get HTTP status code of tags
  28. canvas- Cropping images in different shapes
  29. Compare two Images in JavaScript
  30. trigger file upload dialog using javascript/jquery

Leave a Comment