File API

1. File 对象上的只读属性

• name: 本地文件系统中的文件名
• size: 文件的字节大小
• type: 字符串，文件的MIME类型
• lastModifiedDate: 字符串，上次被修改的时间(只有chrome实现了这个属性)

2. FileReader 异步文件读取机制，读取本地文件

1. 方法

• readAsText(file, encoding): 以纯文本形式读取，保存在resutlt, encoding可选。
• readAsDataURL(file): 读取文件并将文件以数据URI形式保存到result。
• readAsBinaryString(file): 读取文件并将一个字符串保存在result，字符串中的每个字符表示一个字节。
• readAsArrayBuffer(file): 将包含文件的ArrayBuffer保存在result中。

2. 事件

• onprogress(event), 每50ms触发一次progerss, event中含有loaded，total。
• onload(): 读取完毕触发。
• onerror(): 读取失败触发。reader.error.code: 1(未找到文件)；2(安全性错误)；3(读取中断)；4(文件不可读)；5(编码错误)

function onInput(e) {
    let file = e.target.files[0]
    let reader = new FileReader()
    reader.readerAsArrayBuffer(file)
    reader.onprogress = (event) => {
        console.log(event.loaded, event.total)
    }
    reader.onload = () => {
        console.log(reader.result)
    }
    reader.onerror = () => {
        console.log(reader.error.code)
    }
}

3. 读取部分内容
   file.slice(start, length): 起始字节及要读取的字节数。返回Blob的实例，Blob是File的父类。

// 只读取前32字节
let blob = e.target.files[0].slice(0, 32)
let reader = new FileReader()
reader.readerAsArrayBuffer(blob)

4. 对象 URL

引用保存在File或Blob中的数据URL。好处是不必把文件读取到js中而直接可以使用。

<div>
	<input type="file" name="" oninput="onInput(event)">
	<img class="img">
</div>
<script type="text/javascript">
	function onInput(e) {
		var file = e.target.files[0]
		var url = window.URL.createObjectURL(file)
		document.querySelector('.img').src = url
	}
</script>

5. 读取拖放文件

<div class="recipient" >come on baby!</div>
  <img class="img">
</div>
<script type="text/javascript">
    var recipient = document.querySelector('.recipient')

    recipient.addEventListener('dragenter', (e) => {
      e.preventDefault()
    })

    recipient.addEventListener('dragover', (e) => {
      e.preventDefault()
    })

    recipient.addEventListener('drop', (e) => {
      var file = e.dataTransfer.files[0]
      var url = window.URL.createObjectURL(file)
      document.querySelector('.img').src = url
      e.preventDefault()
    })

</script>