前端文件上传

本文已整理到 Github，地址 👉 blog。

如果我的内容帮助到了您，欢迎点个 Star 🎉🎉🎉 鼓励鼓励 :) ~~

我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。

---

简单文件上传

文件上传的传统形式，是使用表单元素 file：

<input type="file" id="file-uploader">

你可以添加 change 事件监听器读取 event.target.files 文件对象。

const fileUploader = document.getElementById('file-uploader')
fileUploader.addEventListener('change', (e) => {
  const files = e.target.files
  console.log('files', files)
})

多个文件上传

使用 multiple 属性

<input type="file" id="file-uploader" multiple />

文件元数据

在成功上传文件内容后，您可能需要显示该文件内容。对于图片，如果我们在上传后不立即将上传的图片显示给用户，则会感到困惑。

每当上传文件时，File 对象都会包含元数据信息，如文件名称、大小、上次更新时间、类型等。此信息可用于进一步验证和决策。

const fileUploader = document.getElementById('file-uploader')

// 侦听更改事件并读取元数据
fileUploader.addEventListener('change', (e) => {
  // 获取文件列表数组
  const files = e.target.files

  // 循环浏览文件并获取元数据
  for (const file of files) {
    const name = file.name
    const type = file.type ? file.type: 'NA'
    const size = file.size
    const lastModified = file.lastModified
    console.log({ file, name, type, size, lastModified })
  }
})

上传前预览图像

我们准备一个上传文件控件，并为预览所选文件准备 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 对象将文件转换为二进制字符串。然后添加 load 事件侦听器，以获得成功文件上传的二进制字符串。
• FileReader.readAsDataURL() 方法用于读取指定的 Blob 或 File对象。

// 获取 FileReader 的实例
const reader = new FileReader()

fileUploader.addEventListener('change', (e) => {
  const files = e.target.files
  const file = files[0]

  // 上传后获取文件对象，以 URL 二进制字符串的形式读取数据
  reader.readAsDataURL(file)

  // 加载后，对字符串进行处理
  reader.addEventListener('load', (e) => {
    // 设置预览元素的源
    previewEle.src = reader.result
  })
})

accept 属性

使用 accept 属性来限制要上传的文件类型。

<input type="file" id="file-uploader" accept=".jpg, .png" multiple>

上面示例中，浏览器将只允许具有 .jpg 和 .png 的文件类型。

验证文件大小

我们读取了文件的大小元数据，可以使用它进行文件大小验证。您可以允许用户上传高达 1MB 的图像文件。

// 文件上载更改事件的侦听器
fileUploader.addEventListener('change', (event) => {
  // 读取文件大小
  const file = event.target.files[0]
  const size = file.size

  let msg = ''

 // 检查文件大小是否大于 1MB，提示对应消息。
  if (size > 1024 * 1024) {
    msg = `<span style="color: red;">允许的文件大小为 1MB。您尝试上载的文件属于${returnFileSize(size)}</span>`
  } else {
    msg = `<span style="color: green;"> ${returnFileSize(size)} 文件已成功上载。 </span>`
  }

  // 向用户显示消息
  feedback.innerHTML = msg
})

显示文件上传进度

更好的可用性是让用户了解文件上传进度。XMLHttpRequest 第二版还定义了一个 progress 事件，可以用来制作进度条。

先在页面中放置一个 progress 标签

<label id="progress-label" for="progress"></label>
<progress id="progress" value="0" max="100" value="0">0</progress>

定义 progress 事件的回调函数

const reader = new FileReader()

reader.addEventListener('progress', (e) => {
  if (e.loaded && e.total) {
    // 计算完成百分比
    const percent = (e.loaded / e.total) * 100
    // 将值设置为进度组件
    progress.value = percent
  }
})

上传目录

有一个非标准属性 webkitdirectory，使我们能够上传整个目录。

虽然最初仅针对基于 WebKit 的浏览器实施，但 WebkitDirectory 在微软 Edge 以及 Firefox 50 及以后也可用。然而，即使它有相对广泛的支持，它仍然不是标准的，不应该使用，除非你别无选择。

<input type="file" id="file-uploader" webkitdirectory />

拖放上传

主要的 JS 如下：

const dropZone = document.getElementById('drop-zone')
const content = document.getElementById('content')

dropZone.addEventListener('dragover', event => {
  event.stopPropagation()
  event.preventDefault()
  event.dataTransfer.dropEffect = 'copy'
})
dropZone.addEventListener('drop', event => {
  // 获取文件
  const files = event.dataTransfer.files
  // ..
})

查看效果

用对象处理文件

使用 URL.createObjectURL() 方法从文件创建一个唯一的 URL。使用 URL.revokeObjectURL() 方法释放它。

DOM 和 URL.createObjectURL() 和 URL.revokeObjectURL() 方法允许您创建简单的 URL 字符串，可用于引用任何可以使用 DOM 文件对象引用的数据，包括用户计算机上的本地文件。

示例：

<div>
  <h1>使用 Object URL</h1>
  <input type="file" id="file-uploader" accept=".jpg, .jpeg, .png" >
  <div id="image-grid"></div>
</div>

const fileUploader = document.getElementById('file-uploader')
const reader = new FileReader()
const imageGrid = document.getElementById('image-grid')

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files
  const file = files[0]
  
  const img = document.createElement('img')
  imageGrid.appendChild(img)
  img.src = URL.createObjectURL(file)
  img.alt = file.name
})