js文件相关API

在表单中我们会用到上传文件的操作，现就文件相关API做以下总结。
文件相关的对象主要有5个。

---

• Blob对象: 是一个代表二进制数据的基本对象。构造函数有两个参数，第一个参数为实际数据的数组，第二个为数据类型。

• File对象: 负责处理那些以文件形式存在的二进制数据，也就是操作本地文件。它是FileList对象的成员，包含了文件的一些元信息。有如下属性值：

  • name: 文件名。
  • size: 文件大小，单位为字节。
  • type: 文件的MIME类型。
  • lastModified: 文件的上次修改时间，格式为时间戳。
  • lastModifiedDate: 文件的上次修改时间，格式为Date对象实例。

• FileList对象: 针对表单的file控件。当用户通过file控件选取文件后，这个控件的files属性值就是FileList对象。它在结构上类似于数组，包含用户选取的多个文件。

• FileReader对象: 负责将二进制数据读入内存内容。采用异步方式读取文件，可以为一系列事件指定回调函数。有多种读取文件的方式。

  • readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个0到255之间的整数。
  • readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’。
  • readAsDataURL(Blob|File)：返回一个基于Base64编码的data-uri对象。
  • readAsArrayBuffer(Blob|File)：返回一个ArrayBuffer对象。
  • abort()：中止读取操作。
    除了上述方法外，还拥有三个只读属性。
  • readyState：FileReader对象的当前状态。
  • result：读取到的文件内容。
  • error：在读取文件时发生的错误。
    事件有load,loadstart,loadend,error,abort,progress。

• URL对象: 用于生成指向File对象或Blob对象的URL。

  • createObjectURL(blob) 会对二进制数据生成一个URL。
  • revokeObjectURL(objectURL) 使URL失效。

---

代码说明：

//css 
.wrap {
  position: relative;
 }
.hide {
  width: 100px;
  height: 30px;
  position: absolute;
  left: 0;
  z-index: 22;
  opacity: 0;
  cursor: pointer
}
.wrap span {
  height: 30px;
  width: 100px;
  position: absolute;
  left: 0;
  z-index: 11;
  color: blue;
  cursor: pointer;
}
//html
<div class="wrap">
  <input type="file" id="file" class="hide">
  <span>上传文件</span>
</div>
//js
var fileDom = document.getElementById("file");        
fileDom.addEventListener('change',function(e){
  console.log(e.target.files);  // e.target.files === fileDom.files
  console.log(fileDom.files)
  var reader = new FileReader();
  reader.readAsText(e.target.files[0]);
  reader.onload = function (e) {
    console.log(e.target.result);  //e.target.result === reader.result
    console.log(reader.result);
  }
   var s = URL.createObjectURL(e.target.files[0])
   console.log(s)
})