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

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

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

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

• iframe 上傳
• ajax 上傳
• 進度條
• 文件預覽
• 拖放上傳

　　為了對這些功能有一個感性認識，你可以先看看 Remy Sharp 提供的范例。

　　雖然這些 API，還沒有得到廣泛部署，但它們是未來的潮流。有了它們，代碼就可以寫得非常優(yōu)雅簡潔，上面五個功能都能在 20 行以內實現(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知識庫：文件上傳的漸進式增強，轉載需保留來源！

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