使用js实现预览上传的图片

最新推荐文章于 2024-09-22 22:38:07 发布

认真的Yu

最新推荐文章于 2024-09-22 22:38:07 发布

阅读量2.4k

点赞数 4

分类专栏： javascript ES6

本文链接：https://blog.csdn.net/weixin_45672865/article/details/123616229

版权

JavaScript 文件上传图片预览 URL.createObjectURL img元素

关键词由CSDN通过智能技术生成

javascript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

ES6

6 篇文章 0 订阅

订阅专栏

使用js实现预览上传的图片

首先，要有一个文件上传控件：

<input
  type="file"
  accept="image/*"
/>

type="file" 设置input为文件上传控件
accept="image/*" 限制文件类型为图片

接下来，给 input 绑定监听事件

 let input = document.getElementsByTagName('input')[0]
 input.addEventListener('change', function () {
   console.log('ok')
 })

当上传图片的时候就会触发监听事件，控制台打印ok。
在这里插入图片描述

然后我们可以通过 input 元素的files属性拿到一个对象，这个对象是一个类似数组的对象，代表一组选中的文件，每个成员都是一个 File 实例。
修改 input 的监听函数：

input.addEventListener('change', function () {
  const { files } = this
  console.log(files)
})

效果：
在这里插入图片描述

然后我们取出files的第一个对象，通过URL.createObjectURL()方法用来为上传/下载的文件、流媒体文件生成一个 URL 字符串。这个字符串代表了File对象或Blob对象的 URL

input.addEventListener('change', function () {
  const { files } = this
  const f = files[0]
  console.log(URL.createObjectURL(f))
})

在这里插入图片描述

接下来我们创建一个 img 标签，并且将它的src设置为这个URL路径，然后再将 img 添加到页面

input.addEventListener('change', function () {
  const { files } = this
  const f = files[0]
  const img = document.createElement('img')
  img.src = URL.createObjectURL(f)
  img.style.width = '100px'
  document.body.append(img)
})

在这里插入图片描述