【前端】【H5 API】实现文件读取操作

H5 API 实现文件读取操作

该接口通过FileReader对象来读取本地存储的文件，然后使用File对象来指定读取的文件或数据

File对象

• 可以是来自用户在一个元素上(如<input>)选择文件后返回的FileList对象，

• 可以是自由拖放操作生成的DataTransfer对象。

  (dataTransfer对象只能访问文件的一些基本的信息。)

文件的上传

由于Web环境的特殊性，为了考虑文件安全问题，浏览器不允许JavaSctipt直接访问文件系统，使用<input>表单元素的文件域\<input type="file">来实现文件的上传。

input元素还有一个multiple属性(HTML 5新增)，可以实现一次上传多个文件。在用户选择文件以后，可以得到一个FileList对象，它代表所选的文件列表。

查看FileList对象

<input type="file" multiple>
  <script>
    var file = document.querySelector('input');
    file.onchange = function() {        // 当用户选择文件后执行此事件
      console.log(this.files);          // 查看FileList对象
    };
  </script>

FileList对象代表所选的文件列表，该对象是一个类数组的形式，其中包含一个或多个File对象。如果用户只选择了一个上传文件，那么只需要访问FileList对象的第一个元素，如果FileList对象是类数组对象，可以使用for循环遍历其内部的File对象

for(var i = 0, numFiles = files.length; i < numFiles; i++){
  var files = files[i];
  …
}

在使用FileReader对象前，需要使用new来实例化FileReader()构造函数，获得一个对象。然后通过这个对象的方法和事件，来实现文件的读取等不同的功能。

无论文件是否读取成功，读取文件的方法都不会返回读取的结果，而是将读取结果存储到result属性中。

FileReader对象的常用方法

方法名称	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file,[ending]	将文件读取为文本
readAsDataURL	file	将文件读取为DataURL
abort	(none)	中断读取操作

FileReader对象的常用事件

事件名称	描述
onabort	读取中断时触发
onerror	读取发生错误时触发
onloadstart	读取开始时触发
onprogress	正在读取时触发
onload	读取成功时触发
onloadend	读取完成时触发(无论成功或失败)

FileReader对象的使用

上传图片并显示略缩图

<input type="file" multiple>
  <div><img alt="null"></div>
  <script>
    var file = document.querySelector('input');
    file.onchange = function () { // 当用户选择文件后执行此事件
      console.log(this.files); // 查看FileList对象
    };
    //初始化盒子模型
    var img= document.querySelector('img');
    file.onchange = function () {
      // ① 初始化reader对象
      var reader = new FileReader();
      // ② 读取文件内容
      reader.readAsDataURL(this.files[0]); // 方式2：读取图片的缩略图
      // ③ 将读取的内容显示到页面中
      reader.onload = function () { // 读取成功时触发
        img.src = this.result; // 将生成的内容赋值为img图片的src
      };
    }
  </script>

上传文档并显示文本

<input type="file" multiple>
  <div>
  </div>
  <script>
    var file = document.querySelector('input');
    var div= document.querySelector('div');
    file.onchange = function () {// 当用户选择文件后执行此事件
        console.log(this.files); // 查看FileList对象
      var reader = new FileReader();// ① 初始化reader对象
      reader.readAsText(this.files[0]);// ② 读取文件内容：读取文本
      // ③ 将读取的内容显示到页面中
      reader.onload = function () { // 读取成功时触发
        console.log('成功');
        div.innerHTML = this.result; // 将生成的内容显示到页面的div元素中
      };
    }
  </script>