摘要：選擇文件談到文件上傳，不得不提，中文名叫表單。當(dāng)需要使用回調(diào)函數(shù)來處理上傳完成后后端返回的數(shù)據(jù)時，需要和后端預(yù)先達(dá)成約定，如，回調(diào)函數(shù)名，參數(shù)列表，等等。后端可以根據(jù)邊界的檢驗(yàn)，識別上傳的文件，讀取元數(shù)據(jù)中的文件屬性，從而為驗(yàn)證提供數(shù)據(jù)。

其實(shí)很早就開始醞釀這一篇了，無奈總是發(fā)現(xiàn)有缺漏的地方，遂努力惡補(bǔ)前端+后端+底層相關(guān)知識。今天終于可以發(fā)表了。

--跟生孩子一樣啊。

談到文件上傳，不得不提 form，中文名叫表單。它可以包含一個用來選擇文件的東東，叫做 file。

file:

action 表示表單的數(shù)據(jù)發(fā)送的目標(biāo)地址，method 表示發(fā)送表單所使用的 http 方法（get / post），enctype表示數(shù)據(jù)的編碼方式，對于文件上傳，必須為 multipart/form-data。

具體的定義參見 form。

下面是對應(yīng)的頁面，可以看到，有一個提示選擇文件的按鈕

點(diǎn)擊按鈕，就可以選擇文件啦。

小貼士：文件選擇好之后，可以通過 FileReader 進(jìn)行預(yù)覽，或者簡單的編輯。

簡單的上傳，只需要提交對應(yīng)的 form 就可以了。是不是很簡單，O(∩_∩)O哈哈哈~。

上面介紹的都太簡單粗暴膚淺了，實(shí)際項(xiàng)目中老板，客戶100%會投反對票。因?yàn)閷?shí)在是太簡陋了。

瀏覽器提供的原生控件實(shí)在是丑的不忍心看，可以自己畫一個好看的按鈕。

.chooseFile{
    min-width: 30px;
    min-height: 15px;
    width: 106px;
    height: 29px;
    background-color: #B6E2C9;
    color: black;
    font-family: monospace;
    font-weight: 400;
    border-color: white;
    border-radius: 17px;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}

記得把原來的form隱藏掉。

接下來你需要做的是給這個按鈕綁定 click listener ，當(dāng)它被點(diǎn)擊時，觸發(fā) form 中的 file 的 click 事件。

有些時候，希望上傳時不刷新當(dāng)前頁面。但是使用 form 是避免不了頁面刷新的。怎么辦？

第一個想出這個辦法的肯定是個頭腦靈活的家伙--使用隱藏的 iframe 上傳。

原理是，在當(dāng)前頁面（父頁面）中添加 iframe，iframe 的頁面（子頁面）中包含 form 和相關(guān)的函數(shù)（驗(yàn)證，預(yù)處理等等）。當(dāng)用戶在父頁面點(diǎn)擊選擇文件的按鈕時，去觸發(fā)子頁面中 file 控件的 click 事件。

當(dāng)用戶提交時，提交子頁面中的 form。這時，子頁面跳轉(zhuǎn)，而父頁面沒有刷新。

這個方案有個缺點(diǎn)，就是需要前后端協(xié)同工作。

當(dāng)需要使用回調(diào)函數(shù)來處理上傳完成后后端返回的數(shù)據(jù)時，需要和后端預(yù)先達(dá)成約定，如，回調(diào)函數(shù)名，參數(shù)列表，等等。這對前后端完全分離的開發(fā)場景(比如，你只是開發(fā)前端UI)是一個挑戰(zhàn)。（出現(xiàn)全棧工程師的原因，是不是就是因?yàn)榍岸斯こ處熛氚堰@些依賴但是卻又無法完全控制的工作給搶過來？）

比如，父頁面須定義回調(diào)函數(shù)

function uploadSuccess (result){
...
}

后端須對action（上面form中定義的/upload）返回html，html包含對回調(diào)函數(shù)的調(diào)用，以及制定參數(shù)。

...