Question

当用户从输入字段中选择时，我正在使用jQuery块来填充带有图像的div，这样他们就可以在上传之前看到他们正在上传的内容。它还将HTML添加到另一个具有图像宽度和高度的div中唯一的问题是它第一次选择图像时不起作用;你必须再次点击浏览，再次选择图像，然后显示。
有什么想法正在发生什么？

    Array
    (    
    [0] =>     
    [1] =>     
    [2] =>     
    [3] =>     
    [4] =>     
    [5] =>     
    [6] =>     
    [7] => 200    
    [8] => 200
    )

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

Answer 1

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

<div class="row" id="bodyDiv" data-controller="orglist">
    <div class="col-md-12">...</div>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-8">...</div>
            <div class="col-md-4">...</div>
        </div>
        <div class="row">
            <div class="col-md-8">...</div>
            <div class="col-md-4">...</div>
        </div>
        <div class="row">
            <div class="col-md-8">...</div>
            <div class="col-md-4">...</div>
        </div>  
    </div>
</div>

Answer 2

添加此功能

  $('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;
                        $('div#image-preview').css('background-image', 'url(' + this.result + ')');
                        image.onload = function() {
                        $('div#image-preview').css('width', image.width);
                        $('div#image-preview').css('height', image.height);

                        $('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;
            });

https://jsfiddle.net/0pL6hn0p/6/

Answer 3

将代码添加到image.onload函数并更改＆＃34; this.result＆＃34; to＆＃34; e.target.result＆＃34;解决了这个问题。

image.onload = function() {
    $('div#image-preview').css('width', image.width);
    $('div#image-preview').css('height', image.height);
    $('div#image-preview').css('background-image', 'url(' + e.target.result + ')');
    $('div#image-preview').css('display', 'inline-block');
    $('div#file-width-height').empty();
    $('div#file-width-height').append('width: ' + image.width + ' height: ' + image.height); 
}

使用jQuery使用图像填充div仅适用于第二次

3 个答案: