使用jQuery FileReader获得宽度和高度？

Question

I'm using jQuery to show an image in a div (#image-preview) when an image is selected, and I can't figure out how to get the width and the height of the image; I'm using "this.width" and "this.height".

Here is my code:

$(document).ready(function() {
                $('input#photo').on('change', function() {
                    var files = !!this.files ? this.files : [];
                    if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
                    if (/^image/.test(files[0].type)) {  // only image file
                        var reader = new FileReader();   // instance of the FileReader
                        reader.readAsDataURL(files[0]);  // read the local file
                        reader.onloadend = function() {  
                            $('div#image-preview').css('display', 'inline-block');
                            $('div#image-preview').css('background-image', 'url(' + this.result + ')'); // set image data as background of div
                            $('div#image-preview').css('width', this.width); // doesn't work??
                            $('div#image-preview').css('height', this.height); // doesn't work??
                        }
                    }
                });
            });

Answer 1

FileReader has not the properties width and height. You can use Image instead like following. Hope this will help you.

 $('input#photo').on('change', function () { var files = !!this.files ? this.files : [], _URL = window.URL || window.webkitURL; if (!files.length) return; if (/^image/.test(files[0].type)) { var img = new Image(); img.onload = function () { $('div#image-preview').css('display', 'inline-block'); $('div#image-preview').css('background-image', 'url(' + this.src + ')'); $('div#image-preview').css('width', this.width); $('div#image-preview').css('height', this.height); }; img.src = _URL.createObjectURL(files[0]); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" id="photo"/> <div id="image-preview"></div> 

Answer 2

尝试在第一个功能的开头使用此功能将照片的宽度和高度保存为变量，然后在第二个功能中使用这些变量。这是范围问题。