JQuery obtains the width and height of the intput file image.

How to determine the width of the image uploaded in the input file form? This time the picture has not really uploaded, nor is it displayed on the page, can not use $ ("id"). Width () this way.

Find a method in stack overflow:

var _url = window. URL | | Window.webkiturl;
$ ("#file"). Change (function (e) {
var file, img;
if ((file = This.files[0])) {
img = new Image ();
Img.onload = function () {
Alert (This.width + "" + this.height);
};
IMG.SRC = _url.createobjecturl (file);
}
});

Discovery can be used, only in the Firefox test, other browser compatibility is unknown, because the background use, so for the moment regardless of compatibility, take to encapsulate a bit.

This encapsulates a wide-height function to get the input file picture, as follows:

//Get input picture width high
function getimagewidthandheight (ID, callback) {
    var _url = window. URL | | Window.webkiturl;
    $ ("#" + ID). Change (function (e) {
        var file, img;< br>         if ((file = This.files[0])) {
             img = new Image ();
            img.onload = function () {
                 Callback && callback ({" Width ": this.width," height ": this.height});
           };
            img.src = _url.createobjecturl (file);
       }
   });
}
A callback method is used here.

Used in jquery:

(function () {
Getimagewidthandheight (' Image_file ', function (obj) {
if (obj.width!= 843 | | obj.height!= 1038) {
$.messager.alert (' Operation Hint ', result.data.msg, ' window picture width must be 843*1038px ');
}
});
}) (JQuery)

That's OK.

Example

Partial HTML code

<div id= "Upload" >
<form action= ' {: U (' Index/uploadhandler ')} ' enctype= ' Multipart/form-data ' method= ' post ' id= ' Imgform ' >
<div id= "Imglist" >

</div>
<div id= "Updiv" >
<input type= ' file ' name= ' photos ' class= ' upfile ' >
</div>
<input type= "Submit" value= "submitted" >
</form>
</div>

JQ Code

$ (function () {
var imgurl=[];
function CreateFile () {
$ (' #updiv '). Append ("<input type= ' file ' name= ' photos ' class= ' ' upfile ' >");
}
function showimg (URL) {
var img= ' ';
$ (' #imglist '). Append (IMG);
}
function AddFile () {
Showimg ($ (this). Val ());
$ (this). Hide ();
CreateFile ();
$ ('. Upfile '). Bind (' Change ', addfile);
}
$ ('. Upfile '). Bind (' Change ', addfile);
})

JS simple way to get pictures

The time stamp behind the picture address is to avoid caching
var img_url = ' yun_qi_img/13643608813441.jpg? ' +date.parse (New Date ());

Creating objects
var img = new Image ();

Change the src of the picture
IMG.SRC = Img_url;

Print
Alert (' Width: ' +img.width+ ', Height: ' +img.height);

Return to 0,0

Example, onload after printing in

The time stamp behind the picture address is to avoid caching
var img_url = '/upload/2013/13643608813441.jpg? ' +date.parse (New Date ());

Creating objects
var img = new Image ();

Change the src of the picture
IMG.SRC = Img_url;

Load Complete execution
Img.onload = function () {
Print
Alert (' Width: ' +img.width+ ', Height: ' +img.height);
};

Returns a parameter

mixed with onload through complete

To test the caching effect, note that the following test picture's URL does not add a timestamp

//Picture address
var img_url = ' static/upload/2013/13643608813441.jpg ';
 
//Create object
var img = new Image ();
&NBSP
//change src for picture
Img.src = Img_url
 
//To determine if there is a cache
if (img.complete) {
   // Print
    alert (' from:complete:width: ' +img.width+ ', Height: ' +img.height);
} else{
   //load Complete execution
    img.onload = function () {
        //Print
        alert (' from:onload:width: ' +img.width+ '), Height: ' +img.height);
   };
}