HTML5提供的文件API

HTML5提供的文件API

FileList对象与file对象

fileList对象表示用户选择的文件列表，每个文件都是一个file对象

通过multiple属性，file控件允许一次放置多个文件

<input type="file" id="file" multiple size="800" />
<button>文件信息</button>
<script>
  function fn() {
    console.log(document.querySelector("#file").files.length);
    let file;
    const dom = document.querySelector("#file");
    for (let i = 0; i < dom.files.length; i++) {
      file = dom.files[i];
      alert(file.name);
    }
  }
  document.querySelector("button").addEventListener("click", fn);

ArrayBuffer与ArrayBufferView对象

ArrayBuffer

ArrayBuffer对象代表一个存储固定长度的二进制数据的缓存区，不能直接对ArrayBuffer中的内容机行操作，必须通过ArrayBufferView对象来读写ArrayBuffer缓存区的内容

创建一个缓存区长度为32byte的ArrayBuffer对象

const buf=new ArrayBuffer(32)

ArrayBufferView

html5一般不直接使用ArrayBufferView，而实使用他的子类实例对象

const int32Array=new Int32Array(ArrayBuffer)

Blob对象

html5中新增了Blob对象，代表原始二进制数据（file对象也继承了Blob对象）

Blob对象两个属性：size：字节长度，type:Blob的MIME类型；

图像的类型一般都是 image/ 开头的，我们可以通过它来判断是不是图像文件

创建blob实例对象

const blob=new Blob([],type)

第一个参数为一个数组，可以放任意数量以下类型的对象，这些对象将依序追加到blob对象中

1》ArrayBuffer对象

2》ArrayBufferView对象

3》Blob对象

4》String

第二个参数为一个对象；可指定type的属性

  let blob = new Blob(["hello", "123"]);
  console.log(blob.size, blob.type); // 8 ''

利用blob和a标签下载

<input type="text" id="ipt" />
<input type="button" id="btn" value="下载input的内容" />
<script>
  const ipt = document.querySelector("#ipt");
  document.getElementById("btn").addEventListener("click", () => {
    const blob = new Blob([ipt.value], { type: "text/plain" });
    const a = document.createElement("a");
    url = window.URL.createObjectURL(blob);
    a.download = "testDown.txt";
    a.href = url;
    a.click();
    window.URL.revokeObjectURL(url);
  });
</script>

slice方法

  const b = new Blob(["hello", "别叫我达芬奇"]);
  const b1 = b.slice(0, 5, "text/plain");
  const b2 = b.slice(5);
  console.log(b1);  // size为5
  console.log(b2);  // size为18

FileReader对象

主要用来把文件读入内存

FileReader对象的5个方法

方法名	参数	说明
readAsBInaryString	Blob对象或（继承了Blob对象的）file对象	将Blob对象或文件中的数据读取为二进制字符串
radAsText	Blob对象或file对象	将Blob对象或文件中的数据读取为文本数据
readAsDataURL	Blob对象或file对象	将Blob对象或文件中的数据读取为DataURL
readAsArrayBuffer	Blob对象或file对象	将Blob对象或文件中的数据读取为ArrayBuffer
abort	none	中断读取

FileReader对象事件

事件	触发时机
onabort	数据读取中断时触发
onerror	数据读取失败时触发
onloadstart	数据读取开始
onprogress	数据读取中
onload	数据读取成功时触发
onloadend	数据读取完成，无论成功或失败

应用：

以dataUrl形式读取

<input type="file" value="以dataUrl形式读取到页面" id="dataUrl" /><br />
<div id="resultBox"></div>
<script>
  const fileIpt = document.getElementById("dataUrl");
  function readAsDataUrl() {
    const file = fileIpt.files[0];
    // console.log(file);
    let reader = new FileReader();
    if (!/image\/\w+/.test(file.type)) {
      alert("请确保文件类型为图像类型");
      return false;
    }
    reader.readAsDataURL(file);
    reader.onload = function(e) {
      console.log(e);
      const result = document.getElementById("resultBox");
      result.innerHTML = `<img src="${this.result}" alt="">`;
    };
  }
  fileIput.addEventListener("change", readAsDataUrl);

二进制形式读取

<input type="file" value="以二进制形式读入页面" id="binaryIpt" /><br />
<div id="resultBox"></div>
<script>
  const binaryIpt = document.getElementById("binaryIpt");
  binaryIpt.addEventListener("change", readAsBinaryFn);
  function readAsBinaryFn() {
    console.log(666);
    const file = binaryIpt.files[0];
    const reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = function() {
      document.getElementById("resultBox").innerHTML = this.result;
    };
  }
</script>

以文本形式读取

<input type="file" value="以文本形式读入" id="text" />
<div id="resultBox"></div>
<script>
  const fileIput = document.getElementById("text");
  fileIput.addEventListener("change", readAsTextFn);
  function readAsTextFn() {
    const file = fileIput.files[0];
    const reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function() {
      document.querySelector("#resultBox").innerHTML = this.result;
    };
  }
</script>