css 上传图片

                            <li class="licence">
                                <span class="type_key type_img_key">
                                        证件照片:
                                </span>
                                <div  class="type_img">
                                    营业执照
                                    <input type="file" id="subImg" onchange="selectImage(this)">
                                    <div class="img"><img src="" alt=""></div>
                                </div>
                                <label for="subImg" class="sub_img">
                                    上传图片
                                </label>   
                            </li>

        .licence{
            @include clear;
            width: 100%;
            padding-bottom: 10px;
            .type_img{
                @include whl(198px,126px);
                font-size: 14px;
                color: #333333;
                text-align: center;
                padding:0;
                position: relative;
                input[type="file"]{
                    position: absolute;
                    width:100%;
                    top:0;left: 0;right: 0;bottom: 0;
                    margin: auto;
                    opacity: 0;
                    z-index: 9;
                    cursor: pointer;
                }
                .img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    z-index: 4;
                    padding:5px;
                }
                &:after{
                    display: none;
                    content: "重新上传图片";
                    position: absolute;
                    background: rgba(0,0,0,0.6);
                    z-index: 8;
                    top:0;left: 0;
                    color: #fff;
                    cursor: pointer;
                    font-size: 14px;
                    width: 100%;
                    height: 100%;
                    line-height: 126px;
                    text-align: center;
                }
                &.active{
                    color:#fff;
                }
                &.active:hover{
                    &:after{
                        display: block;
                    }
                }
            }
            
            .sub_img{
                background: #F4F4F4;
                border: 1px solid #D9D9D9;
                border-radius: 2px;
                @include whl(94px,34px);
                float: left;
                margin-left: 20px;
                text-align: center;
                font-size: 14px;
                color: #666666;
                margin-top: 90px;
                cursor: pointer;
            }
        }

.subject_auth .type .licence {
  width: 100%;
  padding-bottom: 10px;
}

.subject_auth .type .licence:after {
  content: "";
  clear: both;
  height: 0;
  line-height: 0;
  display: block;
}

.subject_auth .type .licence .type_img {
  width: 198px;
  height: 126px;
  line-height: 126px;
  font-size: 14px;
  color: #333333;
  text-align: center;
  padding: 0;
  position: relative;
}

.subject_auth .type .licence .type_img input[type="file"] {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  z-index: 9;
  cursor: pointer;
}

.subject_auth .type .licence .type_img .img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 4;
  padding: 5px;
}

.subject_auth .type .licence .type_img:after {
  display: none;
  content: "重新上传图片";
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  z-index: 8;
  top: 0;
  left: 0;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  width: 100%;
  height: 100%;
  line-height: 126px;
  text-align: center;
}

.subject_auth .type .licence .type_img.active {
  color: #fff;
}

.subject_auth .type .licence .type_img.active:hover:after {
  display: block;
}

.subject_auth .type .licence .sub_img {
  background: #F4F4F4;
  border: 1px solid #D9D9D9;
  border-radius: 2px;
  width: 94px;
  height: 34px;
  line-height: 34px;
  float: left;
  margin-left: 20px;
  text-align: center;
  font-size: 14px;
  color: #666666;
  margin-top: 90px;
  cursor: pointer;
}

 

function selectImage(file) {
    var image = '';
    if (!file.files || !file.files[0]) {
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        file.nextSibling.nextSibling.children[0].src = evt.target.result;
        file.parentNode.className += ' active';
        image = evt.target.result;
    }
    reader.readAsDataURL(file.files[0]);
}