结账前需要客人上传身份证照片正反面,源码放哪里

首先是布局示例:

<div class="correct-message clearfix">

        <div class="message-title pull-left">上传身份证照片:</div>

        <div class="left-image-box pull-left">

          <div class="upload-image-box">

            <input type="file" class="upload-image" id="input-image" accept="image/jpg, image/png" />

            <div class="image-inbox" id="image-left">

              <div class="add-icon-image"></div>

              <div class="add-text">上传照片</div>

            </div>

          </div>

          <img src="#" alt="" id="left-img">

          <div class="left-delete-image">+</div>

          <div class="card-text card-the-right">(身份证正面)</div>

        </div>

        <div class="right-image-box pull-left other-image-box">

          <div class="upload-image-box">

            <input type="file" id="input-image-other" class="upload-image" accept="image/jpg, image/png" />

            <div class="image-inbox" id="image-right">

              <div class="add-icon-image"></div>

              <div class="add-text">上传照片</div>

            </div>

          </div>

          <img src="#" alt="" id="right-img">

          <div class="right-delete-image">+</div>

          <div class="card-text card-the-right">(身份证反面)</div>

        </div>

  </div>


上传功能的实现

//身份证正面(左)

function changeLeftpic() {

    $('#image-left').css({ display: 'none' });

    var reads = new FileReader();

    f = document.getElementById('input-image').files[0];

    reads.readAsDataURL(f);

    reads.onload = function (e) {

      document.getElementById('left-img').src = this.result;

      $('#left-img').css({ display: 'block' });

      $('.left-delete-image').css({ display: 'block' });

      $('#input-image').parent().removeClass('warn');

    };

  }


//身份证反面(右)

  function changeRightpic() {

    $('#image-right').css({ display: 'none' });

    var reads = new FileReader();

    f = document.getElementById('input-image-other').files[0];

    reads.readAsDataURL(f);

    reads.onload = function (e) {

      document.getElementById('right-img').src = this.result;

      $('#right-img').css({ display: 'block' });

      $('.right-delete-image').css({ display: 'block' });

      $('#input-image-other').parent().removeClass('warn');

    };

  }

  // 此处调用

      $('#input-image').change(function () {

      changeLeftpic($(this));

    })

    $('#input-image-other').change(function () {

      changeRightpic($(this));

    })

上传之后删除功能的实现:

 $('.left-delete-image').click(function () {

    document.getElementById('input-image').value = '';

    document.getElementById('left-img').src = '#';

    $('#left-img').css({ display: 'none' });

    $('.left-delete-image').css({ display: 'none' });

    $('#image-left').css({ display: 'block' });

    $('#input-image').parent().addClass('warn');

  })

  $('.right-delete-image').click(function () {

    document.getElementById('input-image-other').value = '';

    document.getElementById('right-img').src = '#';

    $('#right-img').css({ display: 'none' });

    $('.right-delete-image').css({ display: 'none' });

    $('#image-right').css({ display: 'block' });

    $('#input-image-other').parent().addClass('warn');

  })

其中相关的部分css样式(scss):

  .message-title {

    width: calc(100% - 539px);

    height: auto;

    font-size: 14px;

    font-weight: bold;

    line-height: 46px;

    text-align: right;

    //color: $gray-dark;

}

  .left-image-box,

  .right-image-box {

    position: relative;

  }

    .upload-image-box {

    position: relative;

    width: 226px;

    height: 132px;

    margin-bottom: 12px;

    border: 1px dashed #d2d2d2;

    //background-color: $gray-input;


    &.warn {

      border-color: $pink;

    }

  }

  .upload-image {

    position: absolute;

    top: 0;

    opacity: 0;

    width: 226px;

    height: 132px;

  }

    .image-inbox {

    padding-top: 36px;

    text-align: center;

// 上传的+号

    .add-icon-image {

      height: 34px;

      background-image: url(/src/assets/images/add.png);

      background-repeat: no-repeat;

      background-position: center;

      background-size: contain;

    }


    #file {

      width: 100%;

      height: 100%;

      opacity: 0;

      position: absolute;

      left: 0;

      top: 0;

      cursor: pointer;

      z-index: 5;

    }


    .add-text {

      padding-top: 22px;

      font-size: 16px;

      color: $gray-dark;

    }

  }

    .left-delete-image, .right-delete-image {

    position: absolute;

    display: none;

    top: -12px;

    right: 0;

    font-size: 32px;

    color: $gray-base;

    transform: rotate(45deg);

    cursor: pointer;

  }


请先 登录 后评论

1 个回答

admin
擅长:ShopXO,PHP,服务器,前端

你好,建议先查阅相关开发文档 https://ask.shopxo.net/article/61

请先 登录 后评论
  • 1 关注
  • 0 收藏,55 浏览
  • cristina 提出于 2020-08-01 02:54

相似问题