JS - 图片预览

最新推荐文章于 2024-08-06 17:41:12 发布

jnChen10

最新推荐文章于 2024-08-06 17:41:12 发布

阅读量1.4k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/sinat_33184880/article/details/90212190

版权

JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

FileReader

FileReader文档，FileReader对象用于读取计算机上的文件，使用FileReader.readAsDataURL()将读取的内容转化为base64编码URL字符串

<input type="file" id='myFile' multiple="multiple">
<img id='myImg' src="" alt="">

document.querySelector('#myFile').onchange = function () {
  var read = new FileReader()
  read.readAsDataURL(this.files[0])
  read.onload = function () {
    url = read.result
    document.querySelector('#myImg').src = url
  }
}

URL.createObjectURL()

URL.createObjectURL()文档，用于返回本地图片的资源地址

参考博客：细说Web API中的Blob、Blob

<input type="file" id='myFile' multiple="multiple">
<img id='myImg' src="" alt="">

document.querySelector('#myFile').onchange = function () {
  let file = this.files[0]
  let URL = window.URL || window.webkitURL
  let imgURL = URL.createObjectURL(file)

  document.querySelector('#myImg').src = imgURL
}