一：文件读取

a：创建文件读取对象new FileReader() 异步读取;

var reader = new FileReader();  // 创建一个文件读取对象
reader.onload = function () {  // 监听文件读取成功的回调
  console.log(read.reault)  // 读取的结果
}
reader.readAsText(file)  // 以文本的形式读取文件
reader.readAsDataURL(file)  // 以URL格式的Base64字符串以表示所读取文件的内容。

b: 读取的方法：

1、reader.abort(); 中断读取文件，返回时readyState状态为DONE；
2、reader.readAsText(file) // 以文本的形式读取文件
3、reader.readAsDataURL(file) // 以URL格式的Base64字符串以表示所读取文件的内容。

c：监听事件

1、reader.onloadstart = function (){}; 开始文件读取事件
2、reader.onloadend = function (){}; 文件读取结束时触发
3、reader.onload = function () {}; 文件读取完成时触发
4、reader.onabort = function(){}; 文件读取中断时触发
5、reader.onerror = function(){}; 文件读取失败时触发
6、reader.onprogress = function(){{}; 文件读取过程中触发

d：reader.result 文件读取的结果

二：文件的分割：

1、FileReader.readyState 返回常量名

   **EMPTY  (0)** : 还没有加载任何数据<br />    **LOADING（1）**：数据正在被加载<br />    **DONE**（2）：已完成全部的数据请求<br />可以和事件对象中的e.target.readyState返回的状态码进行判断文件读取的情况

var read = new FileRead();
read.onloadend = function (e) {
  if (e.target.readState === FileRead.DONE){  // 2 判断读取状态
  }  
}

三：拖曳文件

section.addEventListener('drop', function (e) {
  e.preventDefault();
  stopPrevent();
  var file = e.dataTransfer.files[0];  // e.dataTransfer对象中存有文件列表
  // 之后进行文件读取上传等操作
}, false)
function stopPrevent () {  // 阻止拖曳上的默认事件
  document.addEventListener('dragenter', function (e){
    e.preventDefault();
  }, false)
  document.addEventListener('dragover', function (e){
    e.preventDefault();
  }, false)
  document.addEventListener('dragleave', function (e){
    e.preventDefault();
  }, false)
  document.addEventListener('drop', function (e){
    e.preventDefault();
  }, false)
}

四：文件上传

// 获取到文件
var fd = new FormData();
fd.append('file', file)
var xhr = new XMLHttpRequest();
xhr.open(url, 'POST');
xhr.upload.onprogress = function () {
  //ajax传输过程触发
}
xhr.send(fd)

五：blob文件读取（同步）

1、概念：

在Web中，Blob类型的对象表示不可变的类似文件对象的原始数据，通俗点说，就是Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作File对象一样操作Blob对象，实际上，File继承自Blob。
a标签中的download当前跳转地址是同源的

<body>
  <a href="" id="btn" target="blank">点击下载</a>
  <script>
    let str = '1234'
    let blob = new Blob([str], {
      type: 'text/plain',
      // endings 
    })
    btn.onclick = function (e) {
      // console.log(blob);
      this.setAttribute('download', 'demo.html');
      let href = URL.createObjectURL(blob)
      console.log(href);
      this.href = href
    }
  </script>
</body>

URL.createObjectURL(blob); 只能将blob对象文件变成url

<input type="file" id="file">
  <script>
    file.onchange = function (e) {
      let file = e.target.files[0];
      let src = URL.createObjectURL(file)
      console.log(src);
      let oImg = new Image();
      oImg.src = src;
      document.body.appendChild(oImg)
    }
</script>

2、使用

a：创建blob对象：

var blob = new Blob( Array, options)
Array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。
options: { type: ‘’, endings : ‘’ }
type: 表示文件的MIEE类型文件
endings: 默认值为”transparent”，用于指定包含行结束符\n(换行)的字符串如何被写入。它是以下两个值中的一个： “native”，代表行结束符会被更改为适合宿主操作系统文件系统的换行符(\r 回车 \n 换行)，或者 “transparent”，代表会保持blob中保存的结束符不变

b: blob对象中的属性介绍

let str = '1234'
let blob = new Blob([str], {
  type: 'text/plain'  // str为 MIEE类型
})
// blob.size :表示该str文件的字节数
// blob.type:  表示文件的类型

c: 方法介绍

1、blob.slice(start, end); 对blob（二进制文件进行按字节截取); 返回分割后的blob
2、blob.text(); 方法返回一个 Promise (resolve)对象，包含 blob 中的内容，使用 UTF-8 格式编码。
3、blob.stream();

注意：

实际上file文件类型也就是继承自blob（二进制对象）的一个类型

blob使用场景（分文件上传）

Blob.prototype.slice()对blob（二进制类型文件进行分割进行分文件上传）

var data = "abcdef";
var blob1 = new Blob([data]);
var blob2 = blob1.slice(0,3);  // 以字节数进行分割
console.log(blob1);  //输出：Blob {size: 6, type: ""}
console.log(blob2);  //输出：Blob {size: 3, type: ""}
console.log(blob2.text())  // promise成功状态的值为abc

HTML5 CSS3 专题

10. 文件读取、分割、查看、上传