前端把控件选中的图片展示出来

html代码

<!--选取文件的控件-->
<input type="file" id="file"/><br/>
<!--展示图片-->
<img src="" id="img"/>
<!--读取后的文件的数据-->
<p id="text"></p>

JavaScript代码

<script>
  //找到选择文件控件的DOM对象，添加改变后触发的方法
  document.querySelector('#file').onchange = function (){
    if(this.files.length){//判断选择的文件数量
      //找到第一个文件
      let file = this.files[0];
      //创建一个读取文件的对象
      let reader = new FileReader();
      //给读取文件对象添加加载结束后触发的方法
      reader.onload = function(){
        // 当 FileReader 读取文件时候，读取的结果会放在 FileReader.result 属性中
        document.querySelector('#img').src = this.result;
        document.querySelector('#text').innerHTML = this.result;
      };
      // 设置读取文件的方式
      reader.readAsDataURL(file);//以base64方式
    }
  }
</script>

转载自