html5多文件预览上传 h5实现文件上传

转载

definitely 2023-07-12 17:45:02

文章标签 html5多文件预览上传本地文件 html 数据 文章分类 代码人生

这里主要讲述有关于移动Web 端操作用户本地文件的解决方案。内容较多，请选择需要部分查看！

主要内容：
- 文件操作的基础知识·FileReader
- 读取用户本地文件
- 上传到服务器
- 预览文件的实现
- 下载文件的实现

一、文件操作的基础知识

如果你只是怀着很模糊的概念进来的，建议你先去 MDN 上去看看：传送门: FileReader 因为后期操作文件的时候会频繁用到里面的知识。

我们都知道，H5 是运行在浏览器或者各种WebView 的壳子中的，JavaScript 本身是没有访问用户本地文件的能力的，所以必须要借助这种底层的接口操作文件。

让我们来创建一个 reader 来读取本地文件。

const fileReader = new FileReader(files)

files 可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

以下介绍 FileReader 的属性，支持的事件和拥有的方法。

属性	类型	读写	说明
error	DOMException	只读	读取文件时发生的错误
readyState	数字常量	只读	`FileReader`状态的数字
result	可能：Blob，ArrayBuffer，取决于读取的方式	只读	读取文件返回的结果

事件	说明
onabort	中断读取时触发
onerror	发生错误时触发
onloadstart	读取任务开始时触发
onloadend	读取操作结束时触发。不管成功错误都会触发
onprogress	在读取 Blob 流时触发。可以做读取进度

方法	说明
abort	中断文件读取
readAsArrayBuffer	读取 ArrayBuffer 格式的结果
readAsBinaryString	读取原始二进制格式的结果
readAsDataURL	读取 Base64 格式的结果
readAsText	读取字符串格式的结果

一旦这些方法读取结果成功以后，result 中的值就不会在再改变。

原谅我这里又把别人的东西搬过来了，人类的本质：复读机！
以上的内容都是从MDN 上整理出来的，还是那句话，如果你对这块的东西不是很了解，先去看看这里：MDN fileReader

至此，我们前置知识方面就算是讲完了，接下来会通过实例讲解获取用户本地的文件。

二、读取用户本地文件

要取得用户本地的文件数据需要经过两个步骤：

通过 input 元素让用户选择需要被获取的文件；
通过 FileReader 读取数据

我们先说第一个，通过 <input type="file" /> 的方式选择文件。
这里是代码，线上 Demo 地址：http://www.abners.cn/test/fileReader.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FileReader 测试</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      text-align: center;
    }
    h3 { color: red; margin-top: 15px; }
    .header-top {
      margin-top: 15px;
    }
    .file-reader-input {
      display: inline-block;
      margin-top: 12px;
      padding: 5px 9px;
      border: 0;
      outline: 0;
      text-align: center;
    }
    .file-reader-input:focus {
      border: 0;
      outline: 0;
    }
    .desc-text {
      margin-top: 36px;
      font-size: 12px;
      color: #999999;
      text-align: center;
    }
    .get-value-btn {
      padding: 9px 12px;
      margin-top: 12px;
      border-radius: 3px;
      color: #58a;
    }
    .get-value-btn:focus {
      outline: none;
    }
  </style>
</head>
<body>
  <h3>!!!请打开控制台，查看输出的结果!!!</h3>
  <h4 class="header-top">该页面主要用于测试 FileReader</h4>
  <form>
    <input class="file-reader-input" type="file" multiple id="fileReaderInput" />
  </form>
  <p class="desc-text">主要通过input 框选取文件，然后把选择的文件参数传递给 FileReader 构造函数。</p>
  <button id="getValueBtn" class="get-value-btn">获取显示 Input 框的值</button>

  <script>
    (function() {
      const inputEle = document.getElementById('fileReaderInput')
      const valueBtn = document.getElementById('getValueBtn')

      inputEle.addEventListener('change', function(e) {
        console.log('我是监听 change 事件的输出')
        console.log(e.target.files)
      })
      valueBtn.addEventListener('click', function(e) {
        console.log('我是通过点击事件监听的输出')
        console.log(inputEle.files)
      })
    })();
  </script>
</body>
</html>

页面效果：

html5多文件预览上传 h5实现文件上传_本地文件

这里通过这里的步骤就能拿到 files 列表，这个列表不是真的数组，是一个类似数组格式的对象，可以通过：Arrat.from(files) 方法让结果变成真正的数组。

第二步，通过 FileReader 获取文件数据。核心代码

resultBtnGroup.addEventListener('click', function(e) {
  const type = e.target.dataset.type // 可能取值：readAsArrayBuffer, readAsBinaryString, readAsDataURL, readAsText
  if (!type) return
  const files = Array.from(inputEle.files) // 获取 input 框的 files 对象
  if (files.length === 0) {
    alert('请先选择一个文件！')
    return
  }

  // 读取文件核心代码
  const fileReader = new FileReader() // 实例化一个 Reader
  fileReader[type](files[0]) // 为了简单起见。我们只读取第一个文件。实际应该需要递归去写。
  fileReader.onload = function() {
    console.log(fileReader.result)  // 最终文件的结果在这里
  }

  // 其他代码，对错误情况处理；通过 请求把数据发送给服务器 等等
})