Display Image dimensions before loading the image
Dear Sir
I am using following jquery to display an image before loading it
Its working perfectly well
I tried but getting the values of Image's Width and Height Before loading the same
However I am getting its value as
undefined
Pls help
- //my code for getting height , width
- var filesize=this.files[0].size/1024 ; var width = this.files[0].width; var height= this.files[0].height; alert('Height'+height+' Width='+width);
- //
- <script type="text/javascript">
-
- $(document).ready(function() {
-
- $('#image1').bind('change', function() {
-
- $('#image1message').empty("");
- $('#image1preview').empty("");
- $('#image1size').text( "File size :"+this.files[0].size/1024 + "KB");
- var filesize=this.files[0].size/1024 ;
-
- //my code for getting height , width
- var filesize=this.files[0].size/1024 ; var width = this.files[0].width; var height= this.files[0].height; alert('Height'+height+' Width='+width);
- //
-
-
-
- if (filesize > 900)
- { $('#image1message').html("File size cannot exceed 650");
- $('#image1message').css('font-family','Arial, Helvetica, sans-serif');
- $('#image1message').css('font-size','18px');
- $('#image1message').css('font-family','Arial, Helvetica, sans-serif');
- $('#image1message').css('color','#F00');
-
-
- $('#image1').focus();
- $('#Submit').hide(1000);
- }
- else
- {
- $('#image1message').html("");
- $('#Submit').show(1000);
- }
- var file = $('#image1')[0].files[0];
- var reader = new FileReader();
- var img = new Image();
- var _URL = window.URL || window.webkitURL;
- reader.readAsDataURL(file);
- reader.onload = function(_file) {
- img.src= _file.target.result;
- $('#image1preview').append('<img src="'+ img.src +'" width=150 />');
- //console.log(img.src);
- }
- });
- });
-
- </script>
-