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

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

--跟生孩子一樣啊。

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

file:

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

具體的定義參見 form。

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

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

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

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

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

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

.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隱藏掉。

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

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

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

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

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

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

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

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

function uploadSuccess (result){
...
}

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

...