文件上傳是最古老的互聯(lián)網(wǎng)操作之一。

　　20多年了，它幾乎沒變，還是原來的樣子：操作麻煩、缺乏交互、用戶體驗(yàn)不佳。在這個(gè)新技術(shù)日新月異的時(shí)代，顯得非常落伍。

　　網(wǎng)頁開發(fā)者們想了很多辦法，試圖提升文件上傳的功能和操作體驗(yàn)，在各種 Javascript 庫的基礎(chǔ)上，開發(fā)了五花八門的插件。可是，由于不同瀏覽器之間的差異，缺乏統(tǒng)一接口，這些插件要么用起來很麻煩，要么不能普遍適用。

　　HTML5提供了一系列新的瀏覽器 API，使得文件上傳有可能出現(xiàn)革命性變化。英國(guó)程序員 Remy Sharp 總結(jié)了這些新的接口，本文在他的文章基礎(chǔ)上，討論如何采用 HTML5 的 API，對(duì)文件上傳進(jìn)行漸進(jìn)式增強(qiáng)，實(shí)現(xiàn)以下功能：

• iframe 上傳
• ajax 上傳
• 進(jìn)度條
• 文件預(yù)覽
• 拖放上傳

　　為了對(duì)這些功能有一個(gè)感性認(rèn)識(shí)，你可以先看看 Remy Sharp 提供的范例。

　　雖然這些 API，還沒有得到廣泛部署，但它們是未來的潮流。有了它們，代碼就可以寫得非常優(yōu)雅簡(jiǎn)潔，上面五個(gè)功能都能在 20 行以內(nèi)實(shí)現(xiàn)。

　　一、傳統(tǒng)形式

　　讓我們從最基本的開始。

　　文件上傳的傳統(tǒng)形式，是使用表單元素 file：

<form action="upload.php" method="post" enctype="multipart/form-data" >
<input type="file" name="upload" /> <br />
<input type="submit" value="Upload" />
</form>

it知識(shí)庫：文件上傳的漸進(jìn)式增強(qiáng)，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。