从本地上传图片到html上显示

<div class="pic" id="imgs" style="position: relative;">
<input type="file" id="file" style="opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;"/>
<i>+</i>
<u>上传照片</u>
</div>


var img = ""
      var file = document.getElementById('file');
       // var image = document.getElementById('imgs');
       file.onchange = function() {
       var fileData = this.files[0];//获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
       var pettern = /^image/;
       
       console.info(fileData.type)
      
       if (!pettern.test(fileData.type)) {
       alert("图片格式不正确");
       return;
       }
       var reader = new FileReader();
       var url=reader.readAsDataURL(fileData);//异步读取文件内容，结果用data:url的字符串形式表示
              
       /*当读取操作成功完成时调用*/
       reader.onload = function(e) {
       console.log(e); //查看对象
       console.log(this.result);//要的数据 这里的this指向FileReader（）对象的实例reader
                $('#imgs').html('+this.result+'"/>');
       img = this.result
                  $(".pic").css("padding","0");
                  $(".pic").css("border","0");
       }
       }

.pic{
  width: 3.36rem;
  height: 1.69rem;
  padding: 0 .7rem;
  color: #ccc;
  margin: 6% auto;
  border: 2px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.pic i{
  font-style: normal;
  font-size: .7rem;
}
.pic u{
  font-style: normal;
  text-decoration: none;
  padding-bottom: .2rem;
}