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>
複製代碼