图片上传显示缩略图
- 只测试Chrome(版本 58.0.3029.81 (64-bit))
HTML
<input id="file" type="file" onchange="ShowImage(this,document.getElementById('img'))">
<br />
<img id="img" height="100px" width="100px">
JS
<script>
function ShowImage(t, img) {
// 获取文件
var file = t.files[0];
// 设置<img/>stc 路径
img.src = window.URL.createObjectURL(file);
}
</script>
vue中选择图片显示
<input id="file" type="file" @change="ShowImage($event)">
<br />
<img id="img" height="100px" width="100px">
ShowImage(event) {
// 获取文件
const file = event.target.files[0];
// 设置<img/>stc 路径
const Img = document.getElementById('img');
Img.src = window.URL.createObjectURL(file);
},
