前端小贴士 - 本地图片预览

最新推荐文章于 2024-06-24 23:32:45 发布

descire

最新推荐文章于 2024-06-24 23:32:45 发布

阅读量685

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/dai_qingyun/article/details/88561823

版权

本文详细介绍了如何使用HTML5的file输入框、URL接口和FileReader对象实现前端本地图片预览功能。通过设置input accept属性限制选择图片，监听change事件获取文件对象，利用URL.createObjectURL()生成Blob URL或FileReader.readAsDataURL()读取为Data URL来展示图片。

摘要由CSDN通过智能技术生成

一、前言

随着前端蓬勃的发展，前端开发者面对的开发需求也越来越复杂，本文介绍的本地图片预览功能则是其中之一。

下面逐一介绍实现本地图片预览功能涉及的知识点：

二、选择本地图片

HTML5主要提供file类型的input标签使得用户可以选择一个或者多个文件：

  <input type="file" id="js-file" accept="image/*" multiple>

设置accept属性可以限制用户可以选择的文件类型，例如上述标签则限制了用户只能选择图片文件。

设置mutiple属性则支持用户同时选中多个文件。

监听input的change事件可以拿到本地文件对象：

document.getElementById('js-file').addEventListener('change', e => {
  const event = e || window.event
  const target = event.target || event.srcElement
  const files = target.files // 类数组
}, false)

需要特别注意files是一个不常见的类数组对象。

拿到本地图片文件并不能直接将图片显示出来，因为无论是通过img标签还是backgroundImage属性，都需要图片的URL，那么一起看看JavaScript中提供哪些API生成URL。