<li>
<label for="uploadFile" class="upload-file">点击上传</label>
<!-- 在CSS中将input隐藏,UI效果用label展示 -->
<input type="file" name="upload_file" id="uploadFile" onchange="uploadImg()" />
<br>
<!-- 没有上传的时候不显示 ,上传以后添加src-->
<img id="showUploadFile" src="" class="picture" style="display:none;" >
</li>
// 点击上传图片
function uploadImg(){
let file = document.getElementById('uploadFile').files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(result){
let showUploadFile = document.getElementById('showUploadFile');
showUploadFile.src = result.target.result;
showUploadFile.style.display ='inline-block'
}
}
.upload-file{
width:80px;
height:30px;
line-height: 30px;
text-align: center;
margin:0;
background-color: #000;
color:#fff;
border-radius: 3px;
cursor: pointer;
}
.picture{
width: 58px;
height: 58px;
border: 1px solid #ccc;
margin-left:42px;
margin-top:10px;
}
input[type=file] {
display: none !important;
}