上传前预览图像

我们准备一个上传文件控件，并为预览所选文件准备 img 元素，结构如下：

<input type="file" id="fileInput" />

<img id="preview" />

getElementById() 方法可以获取这两个元素：

const fileEle = document.getElementById('fileInput')
const previewEle = document.getElementById('preview')

使用 URL.createObjectURL() 方法

URL.createObjectURL() 方法包含一个表示参数中给出的对象的 URL。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。

fileEle.addEventListener('change', function (e) {
    // 获取所选文件
    const file = e.target.files[0]

    // 创建引用该文件的新 URL
    const url = URL.createObjectURL(file)

    // 设置预览元素的源
    previewEle.src = url
})

使用 FileReader 的 readAsDataURL() 方法

• FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

• FileReader.readAsDataURL() 方法用于读取指定的 Blob 或 File对象。

fileEle.addEventListener('change', function (e) {
    // 获取所选文件
    const file = e.target.files[0]

    const reader = new FileReader()
    reader.addEventListener('load', function () {
        // 设置预览元素的源
        previewEle.src = reader.result
    })

    reader.readAsDataURL(file)
})

查看效果