javascript - 使用 jQuery 用图像填充 div 只能工作第二次

Question

当用户从输入字段中进行选择时，我使用 jQuery block 来用图像填充 div，这样他们就可以在上传之前看到正在上传的内容。它还使用图像的宽度和高度将 HTML 添加到另一个 div。
唯一的问题是，第一次选择图像时它不起作用；您必须再次单击“浏览”，再次选择图像，然后它就会显示。
知道发生了什么吗？

$(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 image = new Image();
                        var reader = new FileReader();   
                        reader.readAsDataURL(files[0]);  
                        reader.onloadend = function(e) {  
                            image.src = e.target.result;
                            image.onload = function() {
                            }
                            $('div#image-preview').css('width', image.width);
                            $('div#image-preview').css('height', image.height);
                            $('div#image-preview').css('background-image', 'url(' + this.result + ')');
                            $('div#image-preview').css('display', 'inline-block');
                            $('div#file-width-height').empty();
                            $('div#file-width-height').append('width: ' + image.width + ' height: ' + image.height);
                        }
                    }
                    return false;
                });
            });

第一次选择图像时，宽度和高度设置为零。

Answer 1

我怀疑你想要的更像是这样的:

image.onload = function() {
   /* do these in the onload function... */
   $('div#image-preview').css('width', image.width);
   $('div#image-preview').css('height', image.height);
   $('div#image-preview').css('background-image', 'url(' + this.result + ')');
   $('div#image-preview').css('display', 'inline-block');
   $('div#file-width-height').empty();
   $('div#file-width-height').append('width: ' + image.width + ' height: ' + image.height);
}