<label for="file">上传图片</label>
<input id="file" type="file" name="file" onchange="changepic()"></input>
<img src="" id="show" width="200">
<script>
function changepic() {
const reads = new FileReader();
const f = document.querySelector('#file').files[0];
reads.readAsDataURL(f);
reads.onload = function (e) {
document.getElementById('show').src = this.result;
};
}
</script>
因为表单元素的自带的样式不可更改,这里用label标签来自定义样式,表现结果和input是一样的。
reads..result就是图片的base64形式。
上传一个图片后差不多就是下面这种效果