Question

我是jQuery的新手，不知道为什么这段代码不起作用。当我尝试预览图像缩略图时什么也不显示

<div class="col-md-9">
<div class="btn btn bg-primary">
    <input type="file" id="imgBrowse"/>
</div>
<hr />
<div id="imgPreview" class="thumbnail" >
    <img class="img-responsive" id="targetImg"/>
    <p id="description"></p>
</div>

This is All code

Answer 1

这是您的解决方案。

我使用的是jQuery版本：3.3.1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery自定义代码应类似于：

//Image Upload Preview
$(document).ready(function () {

    $("#imgBrowse").change(function () {
          readImage(this);
    })

})
function readImage(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {


            var image = new Image();
            image.src = e.target.result;
            image.onload = function () {
                var width = this.width;
                var height = this.height;
                $("#description").text(height + " -- " + width);
            }

            $('#targetImg').attr('src', e.target.result);
            $("#imgPreview").show();
    }

    reader.readAsDataURL(input.files[0]);
  }
}

使用jQuery预览具有显示高度和宽度的图像

1 个答案: