这里的上传照片以上传身份证正反面照片为例进行演示
首先是布局示例：
<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;}
