一、關于圖片上傳什么什么的
在XHTML的時代，我們使用HTML file控件上傳圖片一次只能上傳一張。要一次上傳多圖，做法是借助于flash。例如swfupload.js?？上?，使用復雜的點，比如flash文件需與頁面同父文件夾，JavaScript文件大小也很可觀。

我之前曾翻譯編輯過一篇“Ajax Upload多文件上傳插件”的文章，此插件的亮點是使用隱藏的iframe框架頁面模擬ajax上傳，但是，實際上，還是一次只能上傳1張圖片，可以多次上傳而已。

HTML5是個好東東，其中之一就是支持多圖片上傳，而且支持ajax上傳，而且支持上傳之前圖片的預覽，而且支持圖片拖拽上傳，純粹利用file控件實現，JS代碼寥寥，想不讓人稱贊都難??！

二、demo頁面

如果您手頭上的瀏覽器是最新的FireFox或是Chrome瀏覽器，您可以狠狠地點擊這里：基于HTML5的多圖Ajax上傳demo

在demo頁面中，您可以點擊file控件上傳多圖，如下（FireFox 6截圖示意，下同）：

如果有非圖片文件或是圖片尺寸過大，會彈出提示：

或者您可以直接將桌面上的圖片拖到接受拖拽的區域處：

釋放后圖片就可以直接預覽了（此時還未上傳到服務器上）：

此時圖片可提前刪除，也可以直接上傳，例如，我們點擊上傳按鈕，很快的，圖片上傳成功啦:)！

上傳后的頁面地址就返回了，如下：

此時，對應的upload文件夾下面這張圖片就有了：

注意：鄙人博客空間大小有限，我會定時清理該圖片文件夾，so, 諸位不要把這里當做免費的圖片托管場所哦~~

三、核心骨架腳本簡單剖析
首先是文件上傳的一個core文件，是前兩個晚上慢慢吞吞整出來的。文件名是： zxxFile.js (可右鍵……下載)

此文件就幾K，百來行代碼，主要負責文件上傳相關的邏輯（選擇、刪除之類），原生JS，因此，兼容jQuery,YUI, MooYools等。zxxFile.js其實是個小巧的骨架文件，肉體等則需要另外添加。

zxxFile.js其實就是個小小對象而已：