在日常工作中，引用第三方工具是很常見的事。但是如果為了滿足某一個需求，而引用一個巨大的工具，而實際情況卻是僅僅使用到這個工具所有功能的冰上一角，這是相當沒有規劃，沒有追求的行為。為了告別<a target="_blank">Web Uploader</a>（當然這是一個很出色的工具），我用這篇文章理一理文件讀取與上傳的相關知識。

文件讀取

首先我們需要一個上傳的控件。

如果你嫌棄原生的上傳控件顏值不優雅，可以自行用模擬一個，監聽點擊事件并觸發一只隱藏的input[file]。

<!-- 如果需要一次性上傳多個圖片，可以加上multiple屬性 -->
<input id="fileUploadBtn" type="file">

當有文件傳入時，會觸發onchange事件

fileUploadBtn.addEventListener('change', callback)

此時我們可以拿到上傳的file對象，包含了上傳文件的相關信息詳情點這兒。

var callback = function () {
    var file = this.files[0]
}

FileReader API 提供了四種讀取文件方式，名字也取得相當語義化。

var reader = new FileReader()

reader.readAsText(file, encoding)
reader.readAsDataURL(file)
reader.readAsBinaryString(file)
reader.readAsArrayBuffer(file)

reader.readyState 記錄著reader的狀態。

• 0：new之后
• 1：執行上述四個讀取方法之一后
• 2：讀取完畢，觸發onload事件

reader讀取文件是異步操作，主要的生命周期Event和常規異步（如Ajax）很相似。

// 上傳進度
reader.onprogress = function (ev) {
    if (ev.lengthComputable) {  // 文件的長度是否可計算
        ev.total                 // 文件總長
        ev.loaded               // 已加載
    }
}

// 上傳成功
reader.onload = function () {
    reader.result  // 文件信息
}
// 上傳失敗
reader.onerror = function () {
    reader.error  // 錯誤信息
}
// 上傳完成
reader.loadend = function () {}

// 上傳開始
reader.loadstart = function () {}

構造FormData及Ajax上傳文件

在前后端分離與Ajax大行其道的今天，我們這一代人多少對 FormData 有些陌生。今天也算是漲見識了。

var callback = function () {
    var file = this.files[0]
    var xhr = new XMLHttpRequest()

    // new一個FormData實例
    var formData = new FormData()

    // 將file對象添加到FormData實例
    formData.append('file', file)

    xhr.open('POST', 'url', true)
    xhr.send(formData)

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                // doSomeThing(this)
            } else {
                // error(this)
            }
        }
    }

}