最近在做一個(gè)H5的項(xiàng)目，里邊涉及到拍照上傳圖片的功能以及識(shí)別圖片的功能，這里對(duì)識(shí)別圖片的功能不做贅述，不屬本文范疇。我在做完并上線項(xiàng)目后，同事跟我提了一個(gè)要求是可不可以同時(shí)選擇多張圖片上傳，我做的時(shí)候的想法是如果給file表單加了 multiple 屬性就沒(méi)有辦法調(diào)用手機(jī)的攝像頭拍照了，如果不加，就無(wú)法同時(shí)選擇多張圖片，于是我就照實(shí)跟同事說(shuō)了這個(gè)情況。但回頭一想，單張圖片可以上傳，那多張圖片呢？于是就有了本文的內(nèi)容。
HTML5定義了 FileReader 作為文件 API 的重要成員用于讀取文件，根據(jù) W3C 的定義，F(xiàn)ileReader接口提供了讀取文件的方法和包含讀取結(jié)果的事件模型。
FileReader的實(shí)例擁有 4 個(gè)方法，其中 3 個(gè)用以讀取文件，另一個(gè)用來(lái)中斷讀取。下面的表格列出了這些方法以及他們的參數(shù)和功能，需要注意的是 ，無(wú)論讀取成功或失敗，方法并不會(huì)返回讀取結(jié)果，這一結(jié)果存儲(chǔ)在 result 屬性中。
| 方法名 | 參數(shù) | 描述 |
|---|---|---|
| abort | none | 中斷讀取 |
| readAsBinaryString | file | 將文件讀取為二進(jìn)制碼 |
| readAsDataURL | file | 將文件讀取為 DataURL |
| readAsText | file, [encoding] | 將文件讀取為文本 |
延伸閱讀
學(xué)習(xí)是年輕人改變自己的最好方式