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