jquery点击div上传图片，实时显示图片

html代码

<div class="img-avatar" style="border: 1px solid #E6E6E6 ;width: 100%;height: 200px ;overflow:hidden;" title="点击上传封面">
         <input type="file" id="cover_picture" name="cover_picture" style="display:none" >
</div>

js代码

$(function () {
        //显示封面图片
        $("#cover_picture").change(function (e) {
            var file = e.target.files[0] || e.dataTransfer.files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function () {
                    //$(".img-avatar").attr("background", this.result);
                    $(".img-avatar").css("background-image","url("+this.result+")").css(" background-repeat","no-repeat").css('background-size','100% 100%')
                }
                reader.readAsDataURL(file);
            }
        });
        //点击div触发file
        $('.img-avatar').click(function(){
            //或者Dom元素执行点击事件
            $(this).children('input[type="file"]')[0].click();
        });
  
    })

运行结果