上传照片（身份证照片正反面）

这里的上传照片以上传身份证正反面照片为例进行演示

首先是布局示例：

<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;
  }