[TOC]
* * * * *
[參考文章](https://javascript.ruanyifeng.com/htmlapi/file.html#toc3)
### `FileReader` API
`FileReader` 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，它的參數是 `File` 或 `Blob` 對象。[傳送門](https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader)
其中`File`對象可以是來自用戶在一個 `<input>`元素上選擇文件后返回的`FileList`對象,也可以來自拖放操作生成的`DataTransfer`對象,還可以是來自在一個`HTMLCanvasElement`上執行`mozGetAsFile()`方法后返回結果。
該API 的兼容性 [查看FileReader兼容性](https://caniuse.com/#search=FileReader)
#### 1、 `FileReader` 的讀取文件的方法
- `readAsBinaryString(Blob|File)`：返回二進制字符串，該字符串每個字節包含一個0到255之間的整數。
- `readAsText(Blob|File, opt_encoding)`：返回文本字符串。默認情況下，文本編碼格式是’UTF-8’，可以通過可選的格式參數，指定其他編碼格式的文本。
- `readAsDataURL(Blob|File)`：返回一個基于Base64編碼的data-uri對象。
- `readAsArrayBuffer(Blob|File)`：返回一個ArrayBuffer對象。
- `abort()` 中斷讀取
FileReader 的實例擁有 4 個方法，其中 3 個用以讀取文件，另一個用來中斷讀取。需要注意的是 ，無論讀取成功或失敗，方法并不會返回讀取結果，這一結果存儲在 result屬性中。
#### 2、 `FileReader` 的事件
- `onabort`方法：讀取中斷或調用reader.abort()方法時觸發。
- `onerror`方法：讀取出錯時觸發。
- `onload`方法：讀取成功后觸發。
- `onloadend`方法：讀取完成后觸發，不管是否成功。觸發順序排在 onload 或 onerror 后面。
- `onloadstart`方法：讀取將要開始時觸發。
- `onprogress`方法：讀取過程中周期性觸發。
文件一旦開始讀取，無論成功或失敗，實例的 result 屬性都會被填充。如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果，絕大多數的程序都會在成功讀取文件的時候，抓取這個值
#### 3. `FileReader` 的用法
當文件讀取時，會觸發響應的事件，我們可以從事件對象中獲取文件流的一些信息，并且文件讀取的結果會儲存在result這個屬性中。需要注意的是，讀取文件的方法不能同時進行。
```JavaScript
let inp = document.getElementById('file')
inp.onchange = function(e){
let file = e.target.files[0]
let fileReader = new FileReader()
//返回二進制字符串，該字符串每個字節包含一個0到255之間的整數。
fileReader.readAsBinaryString(file)
// fileReader.readAsText(file)
// fileReader.readAsDataURL(file)
// fileReader.readAsArrayBuffer(file)
fileReader.onload = function(reesult){
console.log(e)
}
fileReader.onprogress = function(e){
console.log(e)
}
}
```
### Image 對象
[參考文章](http://javascript.ruanyifeng.com/dom/image.html)
#### 1. Image的使用
`<img>`元素用于插入圖片，主要繼承了 HTMLImageElement 接口。
瀏覽器提供一個原生構造函數Image，用于生成HTMLImageElement實例。
```JavaScript
var img = new Image();
img instanceof Image // true
img instanceof HTMLImageElement // true
```
`Image`構造函數可以接受兩個整數作為參數，分別表示`<img>`元素的寬度和長度。
```JavaScript
// 語法
Image(width, height)
// 用法
var myImage = new Image(100, 200);
```
#### 2. Image的一些屬性
> HTMLImageElement.src屬性返回圖像的完整網址。
> HTMLImageElement.currentSrc屬性返回當前正在展示的圖像的網址。JavaScript 和 CSS 的 mediaQuery 都可能改變正在展示的圖像。
> HTMLImageElement.alt屬性可以讀寫<img>的 HTML 屬性alt，表示對圖片的文字說明。
> HTMLImageElement.isMap屬性對應<img>元素的 HTML 屬性ismap，返回一個布爾值，表示圖像是否為服務器端的圖像映射的一部分。
> HTMLImageElement.useMap屬性對應<img>元素的 HTML 屬性usemap，表示當前圖像對應的<map>元素。
> HTMLImageElement.srcset屬性 讀寫<img>元素的srcset屬性
> HTMLImageElement.sizes屬性 讀寫sizes屬性
> HTMLImageElement.naturalWidth屬性和HTMLImageElement.naturalHeight屬性 分別返回圖像的實際寬度和高度
> HTMLImageElement.width和HTMLImageElement.height 返回img屬性中的width和height 如果沒有則返回圖像的實際寬度和高度
> HTMLImageElement.complete屬性返回一個布爾值，表示圖表是否已經加載完成。如果<img>元素沒有src屬性，也會返回true。
> HTMLImageElement.crossOrigin屬性用于讀寫<img>元素的crossorigin屬性，表示跨域設置。這個屬性有兩個可能的值：anonymous：跨域請求不要求用戶身份（credentials），這是默認值；use-credentials：跨域請求要求用戶身份。
> HTMLImageElement.referrerPolicy用來讀寫<img>元素的 HTML 屬性referrerpolicy，表示請求圖像資源時，如何處理 HTTP 請求的referrer字段。
> HTMLImageElement.x屬性返回圖像左上角相對于頁面左上角的橫坐標，HTMLImageElement.y屬性返回縱坐標。
#### 3. Image的事件
圖像加載完成會觸發 onload 事件， 加載失敗會觸發 onerror 事件， 需要注意的是在Image 未加載完成前，是訪問不到他的一些屬性（比如寬，高等）的
```JavaScript
let img = new Image()
img.src = "http://www.webxiaoma.com/assets/images/manong.jpg"
img.onload = function(){
console.log(img.width)
console.log(img.height)
}
```
### FormData 對象
> XMLHttpRequest Level2添加了一個新的接口FormData. 利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個"表單".比起普通的ajax,使用FormData的最大優點就是我們可以異步上傳一個二進制文件.
FormData對象的操作方法，全部在原型中，自己本身沒任何的屬性及方法。
> append(key,value) 方法向 formData 添加key/value
> delete(key) 方法刪除指定的key
> entries() 方法返回一個迭代器，允許遍歷該對象中包含的所有鍵/值對
> forEach() 方法遍歷formData key/value并執行回調函數
> get(key) 方法獲取指定key的值
> getAll(key) 方法獲取指定key下邊的所有值
> has(key) 方法判斷某個key是否存在formData中
> keys() 方法返回一個迭代器，允許遍歷該對象中包含的鍵/值對的所有鍵
> set(key,value) 在FormData對象中設置一個現有鍵的新值，或者在不存在的情況下添加鍵/值
> values() 方法返回一個迭代器，允許遍歷該對象中包含的鍵/值對的所有值
```JavaScript
let formData = new FormData()
formData.append('name','King')
formData.append('age',12)
formData.append('name','hong')
formData.get('name') // King
formData.getAll('name') //["King", "hong"]
```
