html上传并显示图片

style

.content-list{display: inline-block;width: 100%;}
.content-list .item.upload-img{padding: 0 !important;height: 23vh;width: 100%;position: relative;}
.content-list .item.upload-img .content{position: absolute;top:7vh;width: 100%;}
.content-list .item.upload-img .img{width: 100%;height: 100%;margin: 0;padding: 0;position: relative;z-index: 3;}
.content-list .caption{font-size: 1.2rem;font-weight: bold;padding: 3vw 0;}
.content-list .item{padding: 3vw 0;display: inline-block;width: 100%;}

function

function uploadFile(v){
  let id = $(v).find("input[type='file']").attr('id');
  document.getElementById(id).click(console.log(id));
}
// change and show picture
function changeImg(files,div){
  let file = files[0];
  console.log(file)
  // 本地图片url转化显示
  let reader = new FileReader();
  reader.readAsDataURL(file);
  let that = this;
  reader.onload = function(e) {
  let url = e.target.result;
  // 线上图片地址 对接后端接口
  // $.ajax({
  //   url:url,//url后端接口地址
  //   type:"post",
  //   success:function(res){
  //     console.log("上传图片返回数据");
      // url = 线上图片地址
  //   }
  // })
  $(div).next().attr("src",url);
  };
}

html

<div class="content-list">
        <div onclick="uploadFile(this);" class="item  border-radius-one upload-img">          
          <input type="file" name="id_front_img" id="id_front_img" onchange="changeImg(files,this);" accept="image/*">
          <img src="" alt="" class="img border-radius-one">
          <div class="content text-center">
            <i class="iconfont">&#xe63e;</i>
            <div class="text-grey6">点击拍摄识别人像面</div>
          </div>
        </div>
        <div onclick="uploadFile(this);" class="item  border-radius-one upload-img">          
          <input type="file" name="id_back_img" id="id_back_img" onchange="changeImg(files,this);" accept="image/*" id="">
          <img src="" alt="" class="img border-radius-one">
          <div class="content text-center">
            <i class="iconfont">&#xe63e;</i>
            <div class="text-grey6">点击拍摄识别国徽面</div>
          </div>
        </div>
        <div onclick="uploadFile(this);" class="item  border-radius-one upload-img">          
          <input type="file" name="id_img" id="id_img" onchange="changeImg(files,this);" accept="image/*" id="">
          <img src="" alt="" class="img border-radius-one">
          <div class="content text-center">
            <i class="iconfont">&#xe63e;</i>
            <div class="text-grey6">点击拍摄正面 + 手持人像面</div>
          </div>
        </div>            
      </div>

效果图