瀏覽器文件上傳淺淡
form 表單的各種格式
在出現 ajax 之前，前端是使用 form 表單進行提交數據的，它的結構大概是這樣：
<form>
<input type="text" name="username"/>
<button type="submit">提交</button>
</form>
在 form 表單進行提交時，則支持有四種方式（來自：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files）：
application/x-www-form-urlencoded, text/plain, multipart/form-data, GET 方式即 URL 傳參。
- GET 類請求
其內容是添加到 URL 的 query 部分的：
foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A
- application/x-www-form-urlencoded
POST 方式進行傳輸與 GET 類似內容時，其數據可放在 body 內，application/x-www-form-urlencoded
方式內保證數據格式與普通的 GET 方式類似：
Content-Type: application/x-www-form-urlencoded
foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A
- multipart/form-data
這種方式是支持傳輸其他類型的數據，比如文件或者 blob 類型數據。
其格式如下：
------WebKitFormBoundaryKnsKCAS4s0kSeNQ3
Content-Disposition: form-data; name="外賣測試.png"; filename="Pictures/aa.png"
Content-Type: image/png
------WebKitFormBoundaryKnsKCAS4s0kSeNQ3
Content-Disposition: form-data; name=".localized"; filename="Pictures/.localized"
Content-Type: application/octet-stream
------WebKitFormBoundaryKnsKCAS4s0kSeNQ3
Content-Disposition: form-data; name="start.png"; filename="Pictures/start.png"
Content-Type: image/png
------WebKitFormBoundaryKnsKCAS4s0kSeNQ3--
它的主要結構是以分界符進行分隔，每個分界符后面帶有 \r\n，最后一個分界符會多個 --，表示數據傳輸結束。
它在服務端的解析可以參考 https://blog.csdn.net/shmnh/article/details/49012417
input[type=file] 的一些屬性
<input type="file"/>
和其他類型的 input 相同，事件都是比較類似的。獲取值的方式為添加 change 事件即可。
除此之外，還支持幾個常用的屬性
- multiple 多選屬性，可進行多選
- webkitdirectory 選擇文件夾功能，注意該屬性只支持 chrome 和 firefox
- accept 設置選擇文件的類型，比如 'image/*', 支持圖片類型等
在 change 事件中，可以從 e.target.files 獲取，它是個偽數組，可用 slice 轉換為真正的數組。
內部結構大概如下：
lastModified: 1519638407937,
lastModifiedDate : Mon Feb 26 2018 17:46:47 GMT+0800 (CST)
name: "aaa.png"
size: 1222046
type: "image/png"
webkitRelativePath: "Pictures/外賣測試.png"
這些參數都是比較有用的參數，利用它們可以實現各種復雜的功能。
實現文件上傳
iframe + form
普通 form 實現其中有最大的問題是表單提交后，頁面會進行跳轉，為了解決這個問題，將 form 的 target 設置為一個隱藏的 iframe，
保證調用完成 submit 后仍舊可停留當前頁面
<form action="/api/upload" target="empty-iframe" enctype="multipart/form-data" method="POST">
<input name="file" type="file" multiple webkitdirectory="" />
<button type="submit">提交</button>
</form>
<iframe src="" name="empty-iframe" frameborder="0" style="width: 100%;min-height: 400px;"></iframe>
FormData
由於 IE10 后支持了 FormData 對象，這樣我們提交數據就很方便了。FormData 使用方法是：
const xhr = new XMLHttpRequest()
const form = new FormData()
form.append(key, data)
form.append(file.name, file.file)
xhr.open('post', action, true)
xhr.send(form)
實現起來就很簡單了
圖片本地展示
在有些情況下，可能在上傳要前展示本地的圖片，所以我們需要讀取文件。通用的一種方法是使用 URL.createObjectURL，
當然，該方法還是處於草案階段，但瀏覽器已經基本支持了。它會生成了一個以 blob:// 開頭的地址，指向一個瀏覽器創建的臨時地址。
這樣相當於直接網絡讀取。
對於一些小的圖片也可以先進行讀取后展示，比如我們知道圖片是支持 base64 的方式的，那么我們就可以將圖片轉為 base64 方式進行讀取。
如下例使用 FileReader 進行讀取為 base64, 並進行 md5 校驗：
const reader = new FileReader()
reader.onload = function (e) {
dataPicList.querySelector('#id-' + uid).src = e.target.result
const spark = new SparkMD5()
spark.append(e.target.result)
const hexHash = spark.end()
console.log(hexHash)
}
reader.readAsDataURL(file)
當然，對 base64 獲取的 md5 會與二進制的不同，同時對於大文件讀取至內存再處理會有諸多問題，這些都是可以考慮的一個方向。
本文中實踐的示例在：https://github.com/wenlonghuo/code-test/tree/master/005_upload