Jquery上传图片并回显_jq 上传图片,页面回显-CSDN博客

本文链接：https://blog.csdn.net/xuanhaiyang2008/article/details/102550128

今天帮后端同事写一段js，需求是使用jQuery上传图片并回显，百度了一下，找了一篇比较符合的文章，记录一下，参考地址：http://www.jq22.com/webqd1622。直接上代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>上传图片</title>
  <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  <style>
    html * {
      margin: 0;
      padding: 0;
    }
    .picture-container {
      position: relative;
      margin: 15px;
      display: flex;
      flex-direction: column;
      width: 180px;
    }

    .picture-echo {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }

    .echo-img {
      width: 180px;
      height: 120px;
      margin: 0;
    }

    .picture-wrap {
      width: 180px;
      height: 120px;
      position: relative;
      box-sizing: border-box;
      border: 1px solid #cfdadd;
    }

    /* .wrap {
      background: url(../../res/images/kyc_idcard_a.png);
    } */

    .input-upload-file {
      position: absolute;
      width: 180px;
      height: 120px;
      top: 0;
      left: 0;
      cursor: pointer;
      z-index: 3;
      opacity: 0;
    }

    .upload-div {
      width: 180px;
      height: 120px;
      position: absolute;
      top: 0;
      opacity: 0;
      z-index: 3;
      cursor: pointer;
    }

    .picture-title {
      padding-top: 10px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="picture-container">
    <div class="picture-echo" id="echoImgWrap" style="display: none;">
      <img id="echoImg" src="" class="echo-img" />
    </div>
    <div class="picture-wrap wrap">
      <input id="idcardFront" name="idcardFront" class="input-upload-file" type="file"
        accept="image/jpeg, image/jpg, image/png" onchange="tellFun(event, '#echoImg');" />
      <div class="upload-div" id="uploadDiv" onclick="uploadClick('#idcardFront')"></div>
    </div>
    <div class="picture-title">
      <span>证件正面照片</span><br />
      <span>点击上传</span>
    </div>
  </div>
  <script type="text/javascript">
    function uploadClick(id) {
      $(id).click();
    }
    function uploadImg(id, file) {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (res) {
        $(id).attr("src", this.result);
        $(id + 'Wrap').css("display", 'block');
      };
    }
    // 上传文件
    function tellFun(e, picId) {
      var imgBox = e.target;
      var file = e.target.files[0];
      if (file.size > 8 * 1024 * 1024) {
        // 文件过大
        e.target.value = '';
      } else {
        uploadImg(picId, file)
      }
    }
  </script>
</body>

</html>