File Uploader 大檔案拖曳上傳控制項

想要在您的 Silverlight 和 ASP.NET 頁面上加入『大檔案拖曳上傳』的功能，並在上傳時顯示即時的上傳進度嗎?

在上個月的Visual Studio 2010上市發表會當中，我概略的展示了Silverlight 4的一些新功能，其中我個人最喜歡的範例就是大檔案的拖曳上傳(就是把file從檔案總管中拖曳到瀏覽器中並直接上傳，同時顯示該檔案的真實上傳進度)。

這個功能早在ASP.NET 2.0時代，我們就嘗試透過AJAX來開發過(當然當時只能做大檔案上傳，還沒有拖曳功能)，在坊間許多文管系統當中(最典型的就是MOSS)，這個功能也都是相當重要的需求之一。但礙於當時技術的限制，過去多半的解決方案都是在用戶端安裝特殊的ActiveX元件來處理。一來這衍生出安全性問題，二來也不是每一個用戶端都能夠順利或無條件的安裝ActiveX元件，再加上許多ASP.NET開發人員對於ActiveX元件的開發可能相當陌生，造成開發人員很大的困擾。

在Silverlight 4出現之後，我就一直很想把這個功能作一些整合，因此才有在VS2010上市發表會中的那個範例。但畢竟整個上傳動作涉及前後端的交互運作，前端是Silverlight 4，後端是ASP.NET應用程式，要開發人員從頭到尾重新建立這樣的功能實屬不易。

也因此，趁記憶猶新，我把拖曳大檔案上傳的功能整理成可在Silverlight 4或ASP.NET應用程式當中可重複使用的控制項，提供給需要的開發人員直接使用。 

• 相關的套件FileUploader檔案(Binaries & Examples)下載位置可參考[這裡]。 (範例包含Silverlight與ASP.NET)
• 在ASP.NET 2.0~4.0應用程式中的直接使用方式之說明文件可參考[這裡]。 (是的，在ASP.NET當中也可以直接使用，開發人員不一定需要會Silverlight)
• 在Silvelright 4應用程式當中的使用方式之說明文件可參考[這裡]。

底下是簡單的測試畫面展示，希望對各位有幫助。
 

介紹幾套好用的檔案上傳元件

檔案上傳幾乎每個專案都用的到，但 ASP.NET 2.0 的 FileUpload 控制項有點太陽春了，目前我從網路上找到的 File Upload 元件大多是透過 JavaScript + IFRAME 上傳，或用 JavaScript + Flash 上傳比較好用，今天介紹幾款不錯的。

1. SWFUpload
   
   採用 JavaScript + Flash 進行上傳動作，功能強大、一應俱全，雖然每有 ASP.NET 現成的控制項可用，但是有提供使用 ASP.NET 的範例可以參考，是個值得推薦使用的套件！
   
   其功能有：
   
   - 可一次上傳多個檔案。
   - 支援 JavaScript 的 Callback 事件。
   - 可在檔案開始上傳前取得部分檔案資訊。
   - 可以透過 XHTML 與 CSS 客製化上傳的元件。
   - 可得知檔案上傳進度。
   - 上傳檔案不需要 PostBack，可以等上傳檔案完成後再 PostBack 出去。
   - 只要是 Flash 支援的 Browser 都可以用。
   - 就算 Flash 或 JavaScript 都無效的時候，也可以正常上傳。
   - 可以在「檔案上傳之前」就先判斷檔案大小，超過限制可以不進行上傳。
   - 可以在瀏覽檔案時篩選特定的檔案類型
   - 支援上傳檔案佇列功能，可以在還沒上傳檔案之前將新增要上傳的檔案或移除要上傳的檔案。
   
2. FancyUpload
   
   這個套件就像他的名字一樣很花俏(Fancy)，看過他的 Demo 就是到他的威力了。
   
   其功能有：
   
   - 可一次上傳多個檔案。
   - 可以在瀏覽檔案時篩選特定的檔案類型
   - 支援 JavaScript 的 Callback 事件。
   - 可在檔案開始上傳前取得部分檔案資訊。
   - 可以在「檔案上傳之前」就先判斷檔案大小，超過限制可以不進行上傳，也可限制上傳檔案數的上限。
   - 只要是支援 Flash 8 的 Browser 都可以用。
   - 支援上傳檔案佇列功能，可以在還沒上傳檔案之前將新增要上傳的檔案或移除要上傳的檔案。
   - 所有功能都可以設定，文件
   - 可得知檔案上傳進度。
   - 上傳檔案不需要 PostBack，可以等上傳檔案完成後再 PostBack 出去。
   - 就算 Flash 或 JavaScript 都無效的時候，也可以正常上傳。
   
3. AjaxFileUpload
   
   這是一個 jQuery Plugin，也算是不錯用，只是功能沒像上面兩個那麼多功能，因為這套是用 JavaScript + IFRAME 的技巧實做的。
   
   如果你想找其他 jQuery Plugins 可以來這裡：http://plugins.jquery.com/

[無痛上手]附原始碼+多檔上傳+顯示%數

http://www.blueshop.com.tw/download/show.asp?pgmcde=PGM20091029204050OBR&extcde=PGMLSTCAT

最新版本 http://www.blueshop.com.tw/download/show.asp?pgmcde=PGM20100513124137M2M&extcde=PGMLST

前言：

我自認我做的這個使用容易，我不喜歡很繁瑣的設定，所以我整合成元件的方式，以拖曳的方式建立檔案管理，沒有後台程式卻能管理資料夾並授予存取權限。我強調的是 簡單 好用。

Uploadify is available under the GPL and MIT licenses.


說明：

使用技術 Uploadify、 JQuery、 ASP.NET、 C# 、MS Access資料庫

Uploadify 是 支援強大的上傳介面
http://www.uploadify.com/demo/ Uploadify

額外推薦使用 Silverlight/MultiFileUploader
http://www.michielpost.nl/Silverlight/MultiFileUploader/

而我只是將它整合到 ASP.NET 平台上 。

特色：

0.多個檔案上傳，並且有顯示%數進度。

1.可設定上傳下載權限，卻無後台。

2.可以為任何Object準備虛擬檔案管理資料夾(只要有Guid的話)。
(若沒有Guid的話就類似傳統的檔案管理)

3.你不會看到傳統雜亂的資料夾檔案管理，當你有上百個檔案的時候。

4.你可以搜尋你想要的檔案型態，比方說結取在此資料夾中的所有圖檔。

5.不管你是不是有學過ASP.NET 和C#語言，內附範例，照著使用說明文件上的步驟做，就能完成檔案管理系統。

6. 完整公開程式碼!!

結論：

視情況需求我會考慮釋放整合的原始碼。各位看官我表達能力不好，而且等級也不高，但是我自認我沒有比較差(大概)，希望你們能試試看。如果有你覺得需要改的，請你回應。


http://www.blueshop.com.tw/download/showdw.asp?pgmcde=PGM20091029204050OBR&filcde=PGM20091124083918SZ0

http://www.blueshop.com.tw/download/showdw.asp?pgmcde=PGM20091029204050OBR&filcde=PGM20091030084111R0C