图艺博知识网

您的当前位置：首页正文

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);
},

Top