Here is my code:
if($('#profileimg').val())
{
var fsize = $('#profileimg')[0].files[0].size; //get file size
var ftype = $('#profileimg')[0].files[0].type; // get file type
if(fsize>5242880)
{
$("#filetype").html("<b> Profile Image "+bytesToSize(fsize) +"</b> <br />File is too big, it should be less than 5 MB.");
return false
}
if(filetypeimage(ftype))
{
var file, img;
if ((file = $('#profileimg')[0])) {
img = new Image();
img.onload = function() {
alert(this.width + " " + this.height);
};
img.onerror = function() {
alert( "not a valid file: " + file.type);
};
img.src = _URL.createObjectURL(file);
}
I want to get the image width and height and also i want to get the resolution of video which is going to be uploaded on our server.
Thanks in advance
window.URL = window.URL || window.webkitURL; $('#submit').on('click',function(e){ e.preventDefault(); var fileInput = $('#file')[0], file = fileInput.files && fileInput.files[0]; if( file ) { var img = new Image(); img.src = window.URL.createObjectURL( file ); img.onload = function() { var width = img.naturalWidth, height = img.naturalHeight; window.URL.revokeObjectURL( img.src ); alert(width +" "+ height); }; } }); // you can validate on file change also $("#file").change(function(e) { var file, img; if ((file = this.files[0])) { img = new Image(); console.log(this); img.onload = function() { alert(this.width + " " + this.height); }; img.onerror = function() { alert( "not a valid file: " + file.type); }; img.src = window.URL.createObjectURL(file); } });
<!DOCTYPE html> <html> <body> <form action="#" method="post"> <input type="file" id="file" /> <input type="submit" id="submit" /> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.