最近在改善真。三國無雙 7.0 Replay Analyzer 網站的時候，發現使用者在上傳 Replay 時，需要在所有類型檔案中，選取 Replay (.w3g)。因此，我就尋找 swfUpload 這個套件來改善這樣的問題。
swfUpload is a small JavaScript/Flash library to get the best of both worlds. It features the great upload capabilities of Flash and the accessibility and ease of HTML/CSS.
Features :
* Upload multiple files at once by ctrl/shift-selecting in dialog
* Javascript callbacks on all events
* Get file information before upload starts
* Style upload elements with XHTML and css
* Display information while files are uploading using HTML
* No page reloads necessary
* Works on all platforms/browsers that has Flash support.
* Degrades gracefully to normal HTML upload form if Flash or javascript is unavailable
* Control filesize before upload starts
* Only display chosen filetypes in dialog
* Queue uploads, remove/add files before starting upload[ 使用介紹 ]
Fig 1. Applicationdemo 主頁面。示範如何採用swfUpload套件以供只上傳圖片
Fig 2. 點擊 Select Image 進入選擇上傳圖片的對話框
Fig 3. 上傳結果
這是其中一個範例，更多的 swfUpload 應用 Demo
[ 檔案說明 ]
採用了 applicationdemo 樣本作為編輯的起點。先測試如何改變上傳所針對的檔案類型，接著進行細部改寫。
所需要的檔案為
(\demos\swfupload\) swfupload.js、swfupload.swf、swfuploadbutton.swf 、
(\demos\applicationdemo\) index.php
(\demos\applicationdemo\images\) SmallSpyGlassWithTransperancy_17x18.png
(\demos\applicationdemo\js\) handlers.js
swfupload.swf 跟 swfuploadbutton.swf 為整個介面的核心
swfupload.js 為網頁 Client 端操作 swfUpload 套件的驅動核心以及相關 prototype
handlers.js 為個別應用中設定如何運作 swfUpload 的 script
index.php 為 applicationdemo (圖片上傳功能) 的示範頁面
[ 修改說明 #1] (加入鎖定上傳檔案類型)
Fig 4. 打開 index.php頁面，找出可能的修改處。由下圖可以看出需要修改的地方有兩處，一個是上傳的檔案類型，一個是上傳對話框的描述說明
Fig 5. 將檔案類型鎖定改成 .w3g，並且修改上傳檔案說明
Fig 6. 將修改完的結果放入 RP Analyzer 頁面，我稍微修改樣式之後，置於網頁右上角
Fig 7. 點擊上傳鍵，並且選擇一個 Replay 檔
Fig 8. 跟所有AJAX功能一樣，可以在上傳中顯示等候訊息 (修改 handler.js 中的相關說明)
Fig 9. 上傳成功之後，接著就是解析 Replay 檔
Fig 10. 最後顯示上傳結束
Fig 11. 為了讓使用者能在上傳結束之後馬上看到處理結果，打開 handler.js 頁面，加入一個自動導頁的 javascript
Fig 12. 結果頁面
[ 修改說明 #2] (支援多重檔案類型)
有個時候想要鎖定的檔案類型不只一種，這個時候一樣可以藉由調整 index.php裡的 script 來設定即可
Fig 13. 針對多種類型的檔案，用 ";" 字元做分隔即可
Fig 14. 上傳對話框能圈選多重類型的檔案
[ 參考資料 ]
> SWFUpload
沒有留言:
張貼留言