H5 文件上传、预览和下载 解决方案(一)

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

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

一、文件操作的基础知识

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

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

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

const fileReader = new FileReader(files)

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

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

属性类型读写说明
errorDOMException只读读取文件时发生的错误
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>

页面效果:
在这里插入图片描述

这里通过这里的步骤就能拿到 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)  // 最终文件的结果在这里
  }

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

三、上传服务器

通过前面的步骤你已经拿到文件的数据,你可以根据接口接收的类型,自己通过请求发送给服务器,很灵活的!
如何请求接口这个是基本功,就不再赘述!

总结

好了,这个文章篇幅有点长了,余下的预览部分,我们重新开一片文章继续说把。这里我们总结一下:

其实这里的核型想说的东西就是:读取用户本地的文件,主要担任读取任务的是:FileReader
所以还是那句话,不懂的先去看看文档,把基本功打扎实。

下一篇:预览的实现

版本记录:
2019/01/01 00:00 发布

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值