[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"]
```