图片上传了浏览器 预览 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <script src="../../includes/js/jquery-3.3.1.min.js?v=1856"></script>
  <title>上传图片预览</title>
  <style>

.settle-box3 .upload .uploadimg-2{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}
      .settle-box3 .upload{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 30px;
}
      .upinimg{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.upload-img1-label{
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
  height: 100%;
}
  </style>
</head>
<body>

  <div class="settle-box3" id="lawyer-settle">
      <div class="upload">
        <div class="upload-item-box">

          <div class="upload-item text-center   mt-3">
            <label for="upload-img4" class="upload-img1-label">
              <img class="img img2" src="../../includes/image/shizi.png" alt="">
              <img class=" uploadimg-4" src="" alt="">
              <input type="file" class="upinimg" id="upload-img4" onchange="showPreview(this,4)">
            </label>
          </div>
        </div>

      </div>
  </div>
         
  <script>
    //图片预览的
function showPreview(source,num){
    var file = source.files[0];
    if(window.FileReader) {
        var fr = new FileReader();
        fr.onloadend = function(e) {
            $(`.settle-box3 .upload .upload-item .uploadimg-${num}`).attr("src",e.target.result);
            $(`.settle-box3 .upload .upload-item .uploadimg-${num}`).css("width","100%")
            $(`.settle-box3 .upload .upload-item .uploadimg-${num}`).css("height","100%")
        };
        fr.readAsDataURL(file);
    }
                
               }
  </script> 
</body>
</html>

 

posted on 2020-08-28 19:38  宅到深夜  阅读(189)  评论(0)    收藏  举报