Get file size, image width and height before upload
Multiple images upload with info data preview
Using HTML5 and the File API
Example using URL API
The images sources will be a URL representing the Blob object<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">
const EL_browse = document.getElementById('browse');const EL_preview = document.getElementById('preview');const readImage = file => { if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) ) return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`); const img = new Image(); img.addEventListener('load', () => { EL_preview.appendChild(img); EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB<div>`); window.URL.revokeObjectURL(img.src); // Free some memory }); img.src = window.URL.createObjectURL(file);}EL_browse.addEventListener('change', ev => { EL_preview.innerHTML = ''; // Remove old images and data const files = ev.target.files; if (!files || !files[0]) return alert('File upload not supported'); [...files].forEach( readImage );});#preview img { max-height: 100px; }<input id="browse" type="file" multiple><div id="preview"></div>Example using FileReader API
In case you need images sources as long Base64 encoded data strings<img src="data:image/png;base64,iVBORw0KGg... ...lF/++TkSuQmCC=">
const EL_browse = document.getElementById('browse');const EL_preview = document.getElementById('preview');const readImage = file => { if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) ) return EL_preview.insertAdjacentHTML('beforeend', `<div>Unsupported format ${file.type}: ${file.name}</div>`); const reader = new FileReader(); reader.addEventListener('load', () => { const img = new Image(); img.addEventListener('load', () => { EL_preview.appendChild(img); EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB</div>`); }); img.src = reader.result; }); reader.readAsDataURL(file); };EL_browse.addEventListener('change', ev => { EL_preview.innerHTML = ''; // Clear Preview const files = ev.target.files; if (!files || !files[0]) return alert('File upload not supported'); [...files].forEach( readImage );});#preview img { max-height: 100px; }<input id="browse" type="file" multiple><div id="preview"></div>
Demo
Not sure if it is what you want, but just simple example:
var input = document.getElementById('input');input.addEventListener("change", function() { var file = this.files[0]; var img = new Image(); img.onload = function() { var sizes = { width:this.width, height: this.height }; URL.revokeObjectURL(this.src); console.log('onload: sizes', sizes); console.log('onload: this', this); } var objectURL = URL.createObjectURL(file); console.log('change: file', file); console.log('change: objectURL', objectURL); img.src = objectURL;});
If you can use the jQuery validation plugin you can do it like so:
Html:
<input type="file" name="photo" id="photoInput" />JavaScript:
$.validator.addMethod('imagedim', function(value, element, param) { var _URL = window.URL; var img; if ((element = this.files[0])) { img = new Image(); img.onload = function () { console.log("Width:" + this.width + " Height: " + this.height);//this will give you image width and height and you can easily validate here.... return this.width >= param }; img.src = _URL.createObjectURL(element); }});The function is passed as ab onload function.
The code is taken from here