使用HTML5實現多檔案上傳

在Dojo1.6中有一個嶄新的Multi-File Uploader  (dojox.form.Uploader)，它具有一個可定製樣式的file input按鈕，可使用多檔案選擇模式，且完全基於HTML元素。在不支援HTML5的瀏覽器中，該控制項可以自動切換到使用Flash或者iframe。

原文：The New HTML5 Multi-File Uploader

作者：Mike Wilcox

難度： 初學者

Dojo版本： 1.6

入門

File input之所以叫file input是因為它是一個標準的input元素，且其type屬性被設定為"file"。很多年以來，file input一次只能選擇並上傳單個檔案。在新的HTML5規範中為input元素添加了多選模式。當然，不同瀏覽器對於規範的實現一直以來都不盡相同。比如，Firefox3.6和WebKit以及Firefox4.0就不同。或許你已經猜到了，IE並沒有實現HTML5中多檔案上傳這一功能...甚至IE9也沒有實現。

！dojox.form.Uploader相對於dojox.form.FileUploader做出了很多改進，並將取代後者。由於新的dojox.form.Uploader在Mozilla和Webkit瀏覽器下並不適用Flash，因此許多由於使用Flash而引起的問題得到了規避。Dojo 1.6之後不再會繼續對於dojox.form.FileUploader提供維護，但是該控制項代碼會一直保留到Dojo 2.0之前。

為了應付Dojo開發人員需要面對的各種情況， 真正的“上傳功能”其實是由外掛程式實現的。離開了這些外掛程式，Uploader的代碼允許對file input進行樣式定製，並在不支援HTML5的瀏覽器中通過為每一個檔案的選擇添加一個新的file input元素來實現多檔案的選擇。這所有的一切只需要為一個普通的file input添加dojoType屬性：

<input type="file" multiple="true" dojoType="dojox.form.Uploader"label="Select Some Files" url="/tests/UploadFile.php"uploadOnSelect="true"/>

上述代碼將會產生一個使用你所選擇的Dijit樣式的上傳檔案按鈕。這裡我們預設使用Claro主題：

注意，若是要使用Ajax來上傳檔案的話，你還需要一個Uploader外掛程式，之後我會說明這一點。

除了使用Ajax上傳檔案，這個Uploader也可能被放在一個form表單中直接上傳檔案。使用時記得將你的form表單的enctype屬性設定為multipart/form-data，該屬性是用來上傳檔案的。

<form method="post" action="/tests/UploadFile.php" id="myForm"enctype="multipart/form-data" >    <fieldset>        <legend>Form Post Test</legend>        <input class="browseButton" name="uploadedfile" multiple="true"        type="file" dojoType="dojox.form.Uploader"        label="Select Some Files" id="uploader" />        <input type="text" name="album" value="Summer Vacation" />        <input type="text" name="year" value="2011" />        <input type="submit" label="Submit" dojoType="dijit.form.Button" />    </fieldset></form>

上述代碼的結果如下：

需要重複的是，不使用外掛程式的話，你需要自己實現真正的檔案上傳部分。

儘管上一個例子可以上傳多個檔案，但並沒有可視化介面告訴你到底選擇了哪些檔案。為此，dojo還提供了dojox.form.uploader.FileList這個協助控制項。該協助控制項可以被綁定到一個dojox.form.Uploader控制項上，這樣它就可以自動偵測哪些檔案被選擇或是移除又或是上傳並即時地在介面上將對應狀態表示出來。在使用Ajax上傳時，該控制項還提供一個內建的進度條來顯示上傳進度。

<form method="post" action="UploadFile.php" id="myForm"enctype="multipart/form-data" >    <fieldset>        <legend>Form Post Test</legend>        <input name="uploadedfile" multiple="true" type="file" id="uploader"        dojoType="dojox.form.Uploader" label="Select Some Files" >        <input type="text" name="album" value="Summer Vacation" />        <input type="text" name="year" value="2011" />        <input type="submit" label="Submit" dojoType="dijit.form.Button" />        <div id="files" dojoType="dojox.form.uploader.FileList"        uploaderId="uploader"></div>    </fieldset></form>

！注意， FileList有一個自訂屬性指向所要綁定的Uploader控制項，如上述代碼中11行所示。

結果如下：

外掛程式

Uploader有種外掛程式可以用來處理Ajax上傳。HTML5外掛程式通過Gecko（Firefox）和WebKit（Safari，Chrome）瀏覽器中file input的新類型來實現上傳。在IE下你有兩種選擇：IFrame外掛程式或是Flash外掛程式。這兩個外掛程式並沒有任何新的東西，實質上它們重用了以前的FileUploader中的代碼，並進行了簡化。

IFrame和Flash外掛程式擴充了HTML5外掛程式，因此你不需要在你的項目中同時匯入兩者。如你所想的那樣，只有當你在開發一個不用相容IE的項目時（你太幸運了！）才會單獨使用HTML5外掛程式。

在之前的例子中，頁面在遞交時會通過post方式來將頁面資訊傳遞給UploadFile.php。如果我們需要使用Ajax來實現的話，只需要匯入IFrame和Flash外掛程式之一即可：

dojo.require("dojox.form.uploader.plugins.Flash");

如果你不希望在IE下使用Flash的話，你可以使用IFrame外掛程式：

dojo.require("dojox.form.uploader.plugins.IFrame");

等一下，之前的例子使用的是簡單的form表單，並沒有使用任何外掛程式；而現在用的這些外掛程式是為了在IE下運行Ajax上傳的，所謂的HTML5外掛程式到底在哪裡？

如我之前所說的，Flash和IFrame外掛程式擴充了HTML5外掛程式，因此它已經被包含在這兩個外掛程式裡並會自動工作。不過如果你確信你不會使IE...甚至是IE9這樣不支援HTML 5表單功能的瀏覽器的話，你可以用以下方式直接使用HTML5外掛程式：

dojo.require("dojox.form.uploader.plugins.HTML5");

不管是哪種方式，一切都會被自動處理。當按下“Submit”按鈕時，Uploader將會阻斷onsubmit事件，因此頁面不會進行跳轉，之後它會從action屬性中擷取URL資訊，並收集form表單中的資料傳遞到伺服器端。

結論

得益於幾年在FileUploader上的工作經驗，我才能將這個新的Uplaoder做的簡單易用、功能齊備。之前在FileUploader上的工作曾因為Flash外掛程式在除了IE之外的瀏覽器上表現並不是那麼變得很難維護。儘管FileUploader跑起來沒有大問題，但在與Dijit Tabs或是Dijit Dialog等控制項一起使用時還是經常會有一些詭異bug。現在有了HTML5的新功能，Firefox和WebKit下新的Multi-File Input得以有效工作，同時由於這都是原生的HTML元素，也不會有任何渲染問題。