1. HTML文件

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

2. 点击上传后，读取上传的文件

// 点击上传图片
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'}
}

3. 样式文件CSS

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