如何获取高度和宽度或用户本地图像

Question

Working Fiddle: http://jsfiddle.net/nbv8mb4a/

Attempted Fiddle: http://jsfiddle.net/3m0zekyj/

My working Fiddle allows the user to see the image before uploading. What I am attempting to do next is to obtain the height and width of the image to scale so that at least one side is 160px whereas the otherwise will be 160px or greater the image will scale.

Images lower than 160 height or width will not be allowed however I'm stuck on my tracks to get the width and height. My working code so far is below;

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function(){
    readURL(this);
})

$('#file').click(function(){
    fileInput.click();
}).show();

function readURL(input) {
    $('#blah').hide();
    if (input.files && input.files[0]) {
        var goUpload = true;
        var uploadFile = input.files[0];
        if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) {
            $('#file').effect( "shake" );
            $('#file').text('You must select an image file only');
            setTimeout(function() { $('#file').text('Choose file');},5000);
            goUpload = false;
        }
        if (uploadFile.size > 2000000) { // 2mb
            //common.notifyError('Please upload a smaller image, max size is 2 MB');
            $('#file').text('Please upload a smaller image, max size is 2 MB');
            setTimeout(function() { $('#file').text('Choose file');},5000);
            goUpload = false;
        }
        if (goUpload) {
            $('#file').text("Uploading "+uploadFile.name);
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result).show();
                $('#file').text(uploadFile.name);
            }
            reader.readAsDataURL(uploadFile);
        }
    }
}

Some Progress: http://jsfiddle.net/pe8wg9kx/

Answer 1

In your attempted fiddle you are calling:

width = this.width(); 
height = this.height();

, which are undefined.
First assign the src attribute and then read width and height like this:

$('#blah').attr('src', e.target.result).show();
width = $('#blah').width(); 
height = $('#blah').height();