function readImage(inputFiles,$input){
if(inputFiles == undefined || inputFiles.length == 0) return;
var inputFile = inputFiles[0];
var reader = new FileReader();
reader.readAsDataURL(inputFile);
reader.onload = function(event) {
$input.attr("src", event.target.result);
var image = new Image();
image.src = event.target.result;
image.onload = function() {
console.log('height: ' + this.height); ** <=== this * **
console.log('width: ' + this.width); ** <=== and this * **
};
};
}
how i can make them global var
console.log('height: ' + this.height);
console.log('width: ' + this.width);
i want when i load an image i can get the height and width from another function
like :
function getSize(){
return this.height+'|'+this.width;
}
You can get the image size, by using the following line of code:
var image = document.getElementById ('image');
console.log (image.clientWidth + "x" + image.clientHeight)
Sample code in fiddle.
I need a functionality in which i am uploading an image and checking the max criteria.if the image is bigger then max criteria then show alert msg
alert("Height is bigger then our max criteria pls select image max height and width =etc");
I am able to do all functionality but when I am uploading image then i am giving a condition to show the selected image actual Hight an Width.and i am getting previous image height an width
my coading is:
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://jqueryui.com/resources/demos/style.css" rel="stylesheet"></link>
<script type="text/jquery">
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxh = 800;
var maxw = 800;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function () {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size / 1024) + 'KB';
if (w > maxw && h > maxh) {
alert("Height is bigger then over max criteria pls select image max height and width =2024X2024");
alert(width);
alert(height);
} else {
$('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
}
};
image.onerror = function () {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
</script>
<style>
#uploadPreview img {
height:32px;
}
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
</body>
</html>
Question/problem: Each time i am getting previous selected image dimension not current image image dimension.
Hope you understand my question
See THIS FIDDLE, the important change is that your logic is wrong- you're checking the height and width against the previously uploaded image (blah), you actually need to execute the upload to check the properties- and then determine what action to take.
Note that the below/linked example takes this answer on SO, edited for your purposes.
HTML
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
JS
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxh = 800;
var maxw = 800;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function () {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size / 1024) + 'KB';
if (w > maxw && h > maxh) {
alert("Height is bigger then over max criteria pls select image max height and width =2024X2024");
alert(width);
alert(height);
} else {
$('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
}
};
image.onerror = function () {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
Well, I have this code:
http://jsfiddle.net/hv9gB/3/
(function() {
var img = document.getElementById('my_image');
// Original
var width, height;
// Display
var d_width = img.width;
var d_height = img.height;
var updateDetail = function() {
document
.getElementById('display_size')
.innerHTML = 'Display Size: ' + d_width + ' x ' + d_height;
document
.getElementById('native_size')
.innerHTML = 'Original Size: ' + width + ' x ' + height;
};
// Using naturalWidth/Height
if (img.naturalWidth) {
width = img.naturalWidth;
height = img.naturalHeight;
updateDetail();
} else {
// Using an Image Object
img = new Image();
img.onload = function() {
width = this.width;
height = this.height;
updateDetail();
};
img.src = 'http://lorempixel.com/output/nature-q-c-640-480-3.jpg';
}
}());
And that is my site:
http://dhems.x10.mx/
But on my site isn't working show the width and height of image
Why?!?!
Put your code in
window.onload = function() {
//insert code here
}
Your js file is executed before the engine reach the picture..You're getting the following console error:
Uncaught TypeError: Cannot read property 'width' of null
It's also a good practice to put all scripts files in the end of the page and all css files in the begin. It will increase the loading time of your page, because if JS files are in the begin, your browser won't start to render until these files are downloaded.
your code should look like:
window.onload = function() {
var img = document.getElementById('my_image');
// Original
var width, height;
// Display
var d_width = img.width;
var d_height = img.height;
var updateDetail = function() {
document
.getElementById('display_size')
.innerHTML = 'Display Size: ' + d_width + ' x ' + d_height;
document
.getElementById('native_size')
.innerHTML = 'Original Size: ' + width + ' x ' + height;
};
// Using naturalWidth/Height
if (img.naturalWidth) {
width = img.naturalWidth;
height = img.naturalHeight;
updateDetail();
} else {
// Using an Image Object
img = new Image();
img.onload = function() {
width = this.width;
height = this.height;
updateDetail();
};
img.src = 'http://lorempixel.com/output/nature-q-c-640-480-3.jpg';
}
}
Move the script tag after the image in HTML. Script gets executed before the image goes into page.
Put the code at the bottom of your <body> in a <script type='text/javascript'> or use window.onload. If you have other things loading onload the first option is your best choice, otherwise use this code:
<script type='text/javascript'>
(function(){
var pre = window.onload;
onload = function(){
if(pre)pre();
//other code here
}
})();
</script>
This example can be used in your <head>.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
function readImage(file) {
var reader = new FileReader();
var image = new Image();
reader.readAsDataURL(file);
reader.onload = function(_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function() {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~(file.size/1024) +'KB';
$('#uploadPreview').append('<img src="'+ this.src +'"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>');
};
image.onerror= function() {
alert('Invalid file type: '+ file.type);
};
};
}
$("#choose").change(function (e) {
if(this.disabled) return alert('File upload not supported!');
var F = this.files;
if(F && F[0]) for(var i=0; i<F.length; i++) readImage( F[i] );
});
</script>
<meta charset=utf-8 />
<title>Multiple image upload with preview by Roko C.B.</title>
</head>
<body>
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
</body>
</html>
I am looking for some method to prompt the width and height of the image being uploaded using an asp file upload control. Following is the code I am using to prompt message for file size. I just want to add the width and height of the image being uploaded using that upload control. Please take a note that I can't use javascript DOM here like img.clientWidth as there is no such html object to call it.
Here's the JS Code
$(document).ready(function () {
$("#<%= fupNewImage.ClientID %>").bind("change", function () {
var fSize = ((this.files[0].size) / 1024).toFixed(2);
if (fSize <= 200) {
$("#fupSize").html('Good file size: ' + fSize + " kb Width=? and Height=?" ); // ? denotes the actual value to be put.
}
//---------More cases
});
});
Solved!!
Thanks to #Esailija
After a lot of searching I finally found a workout # REF https://stackoverflow.com/a/8904008/1584140
var _URL = window.URL || window.webkitURL;
$("#<%= fupNewImage.ClientID %>").bind("change", function () {
//================Changed Code===================
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
var fSize = ((file.size) / 1024).toFixed(2);
var WH = " Widht: " + this.width + "px & Height: " + this.height + "px";
if (fSize <= 200) {
$("#fupSize").html('Good file size: ' + fSize + " kb" + WH);
}
};
img.onerror = function () {
alert("not a valid file: " + file.type);
};
img.src = _URL.createObjectURL(file);
}
//====================================
});
});
How can I get the file size, image height and width before upload to my website, with jQuery or JavaScript?
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
Here is a pure JavaScript example of picking an image file, displaying it, looping through the image properties, and then re-sizing the image from the canvas into an IMG tag and explicitly setting the re-sized image type to jpeg.
If you right click the top image, in the canvas tag, and choose Save File As, it will default to a PNG format. If you right click, and Save File as the lower image, it will default to a JPEG format. Any file over 400px in width is reduced to 400px in width, and a height proportional to the original file.
HTML
<form class='frmUpload'>
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>
<canvas id="cnvsForFormat" width="400" height="266" style="border:1px solid #c3c3c3"></canvas>
<div id='allImgProperties' style="display:inline"></div>
<div id='imgTwoForJPG'></div>
SCRIPT
<script>
window.picUpload = function(frmData) {
console.log("picUpload ran: " + frmData);
var allObjtProperties = '';
for (objProprty in frmData) {
console.log(objProprty + " : " + frmData[objProprty]);
allObjtProperties = allObjtProperties + "<span>" + objProprty + ": " + frmData[objProprty] + ", </span>";
};
document.getElementById('allImgProperties').innerHTML = allObjtProperties;
var cnvs=document.getElementById("cnvsForFormat");
console.log("cnvs: " + cnvs);
var ctx=cnvs.getContext("2d");
var img = new Image;
img.src = URL.createObjectURL(frmData);
console.log('img: ' + img);
img.onload = function() {
var picWidth = this.width;
var picHeight = this.height;
var wdthHghtRatio = picHeight/picWidth;
console.log('wdthHghtRatio: ' + wdthHghtRatio);
if (Number(picWidth) > 400) {
var newHeight = Math.round(Number(400) * wdthHghtRatio);
} else {
return false;
};
document.getElementById('cnvsForFormat').height = newHeight;
console.log('width: 400 h: ' + newHeight);
//You must change the width and height settings in order to decrease the image size, but
//it needs to be proportional to the original dimensions.
console.log('This is BEFORE the DRAW IMAGE');
ctx.drawImage(img,0,0, 400, newHeight);
console.log('THIS IS AFTER THE DRAW IMAGE!');
//Even if original image is jpeg, getting data out of the canvas will default to png if not specified
var canvasToDtaUrl = cnvs.toDataURL("image/jpeg");
//The type and size of the image in this new IMG tag will be JPEG, and possibly much smaller in size
document.getElementById('imgTwoForJPG').innerHTML = "<img src='" + canvasToDtaUrl + "'>";
};
};
</script>
Here is a jsFiddle:
jsFiddle Pick, display, get properties, and Re-size an image file
In jsFiddle, right clicking the top image, which is a canvas, won't give you the same save options as right clicking the bottom image in an IMG tag.
As far as I know there is not an easy way to do this since Javascript/JQuery does not have access to the local filesystem. There are some new features in html 5 that allows you to check certain meta data such as file size but I'm not sure if you can actually get the image dimensions.
Here is an article I found regarding the html 5 features, and a work around for IE that involves using an ActiveX control. http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html
So I started experimenting with the different things that FileReader API had to offer and could create an IMG tag with a DATA URL.
Drawback: It doesn't work on mobile phones, but it works fine on Google Chrome.
$('input').change(function() {
var fr = new FileReader;
fr.onload = function() {
var img = new Image;
img.onload = function() {
//I loaded the image and have complete control over all attributes, like width and src, which is the purpose of filereader.
$.ajax({url: img.src, async: false, success: function(result){
$("#result").html("READING IMAGE, PLEASE WAIT...")
$("#result").html("<img src='" + img.src + "' />");
console.log("Finished reading Image");
}});
};
img.src = fr.result;
};
fr.readAsDataURL(this.files[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" capture="camera">
<div id='result'>Please choose a file to view it. <br/>(Tested successfully on Chrome - 100% SUCCESS RATE)</div>
(see this on a jsfiddle at http://jsfiddle.net/eD2Ez/530/)
(see the original jsfiddle that i added upon to at http://jsfiddle.net/eD2Ez/)
A working jQuery validate example:
$(function () {
$('input[type=file]').on('change', function() {
var $el = $(this);
var files = this.files;
var image = new Image();
image.onload = function() {
$el
.attr('data-upload-width', this.naturalWidth)
.attr('data-upload-height', this.naturalHeight);
}
image.src = URL.createObjectURL(files[0]);
});
jQuery.validator.unobtrusive.adapters.add('imageminwidth', ['imageminwidth'], function (options) {
var params = {
imageminwidth: options.params.imageminwidth.split(',')
};
options.rules['imageminwidth'] = params;
if (options.message) {
options.messages['imageminwidth'] = options.message;
}
});
jQuery.validator.addMethod("imageminwidth", function (value, element, param) {
var $el = $(element);
if(!element.files && element.files[0]) return true;
return parseInt($el.attr('data-upload-width')) >= parseInt(param["imageminwidth"][0]);
});
} (jQuery));