JS图片上传显示缩略图(Chrome)

图片上传显示缩略图

  • 只测试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);
},
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容