[HTML].flash 上傳元件的限制

前言:
最近在開發一個 HTML 上傳檔案的 form, 類似 gmail 的界面, 可以在同一個畫面裡, 透過 flash 上傳多筆的附件檔案.

這次的遇到的問題是, 我在畫面中使用了2個 swfupload 物件, 一個要上傳附件, 一個要上傳多媒體檔案, 上傳多媒體檔案時, 無法讓檔案上傳, 可是上傳附件的部份都ok.


* 附註:上傳多媒體檔案的方式是透過 jQuery 的 blockUI plugin 彈出一個 dialog:

說明: 這個彈出的方式, 比較特別, 是先選取檔案, 等使用者按下 "上傳"按鈕, 才開始上傳資料.


debug swfupload 的 message 如下:




假設, 是因為放了2個 swfupload object 造成的沖衝. 我的除錯流程如下:
挑戰解法 1, 增加一個新的區塊, 把這種"確定後才開始上傳" 的範例用的程式都放到新的區塊. 測試結果, 是ok的. 測試的範例, 可以2段式的, 按下確定後, 才開始上傳.

挑戰解法 2. 移掉 附件在用的 swfupload object, 讓畫面只剩下 上傳多媒體用的 swfupload object, 結果,還是不能 work.

所以, 這一個假設, 應該不成立, 於是比較看看目前的顯示方式, 與"確定後才開始上傳" 的範例的差異, 假設要存取 user client 端的資料時, swfupload 必需是 visible(也許看的到), 結果可行, 似乎是安全性造成的.

結果: flash 上傳元件的限制, 就是 user 要開始上傳 client 端資料時的一瞬間, swfupload object 需要要顯示在畫面裡可能被看的見的區塊裡, 用 "一瞬間" 的意思指, 原本隱藏的區塊, 在 "選取" 檔案時, 和 "開始上傳時" 這2個時間點, 都顯示在畫面上, 是可以上傳成功的.


* 附註: 當 user 選好 client 端的檔案後, "可能" 不能對這一個 flash object 做搬移區塊的動作. 搬了的話會造成 flash UI 的重新整理, 也會造成無法上傳檔案. 會用 "可能", 是指我的手法可能太遜, 搬失敗, 可能有其他的方法, 可以正常地去搬移 flash object 的位置, 而且還可以正常的上傳, 這個部份先跳過...



相關文章:
swfupload Document:
http://demo.swfupload.org/Documentation/#startUpload

swfupload project:
http://code.google.com/p/swfupload/

後記: 原來是 blockUI 裡的 bindEvents, 把事件吃掉..., 我最後的解法是 bindEvents: false, 然後再把 flash 放在一個奇怪的 position:absolute;z-index:9999; left:-100px; top:-50px; 的 layer 裡, 應該可以有更好的解法 XD

寫多檔上傳的AP的劇本

寫多檔上傳的AP, 這個還滿常見的, 像是 gmail 裡, 可以在form 沒有submit 的情況下, 上傳很多的附件檔案.

我想到寫法, 有2種:
方案 1. 使用 tokenID 與 temp table 來暫存資料, 會多2個步驟, 但可以適用於比較多的情況.
方案 2. 不使用 tokenID, 適用於比較簡單的情況, user 在上傳檔案後, 就把實體檔案名稱暫存到 user 正在輸入的form 裡的一個 hidden 欄位裡.

名詞解釋: tokenID 就是到 bank 排隊時抽的號碼牌, 每個人都會抽到不同的流水號.


這次要詳細介紹的是方案1裡的細部流程.
下面的劇本, 總共用到
table 1: 流水號專用table.
table 2: 資料主檔table.
table 3: 附件temp table.
table 4: 附件主檔table.

1. 產生 Form, 並抽一張號碼牌 (tokenID).
1.1 是 "新增" 的情況下, 先顯示一個 html form 給 user 做輸入,
1.2 是 "修改" 的情況下. 要先把附件, 從 附件主檔table copy 資料到 附件temp table 裡.

2. 在 form 裡, 放一個 flash object, 讓 user 可以選取用戶端檔案,

3. 在 user 選完檔案時, 透過 flash 先存取到用戶端檔案名稱, 再透過 javascript, 動態產生一行附件的資訊(包括 附件在用的 fileid)在 form 的 UI 中.

4. 在 flash 上傳中, 不斷地更新目前上傳的進度. (ex: 上傳了 ??%) 在畫面上, 或使用 progress bar.

5. 在 flash 上傳完成後, 更新附件的資訊為 "已完成" 在 form 的 UI 中. 如果是選擇方案2的話, 就是在這一個步驟, 把附件的流水號, 或是實體檔名 queue 在 hidden 欄位即可完成多檔上傳.

6. 在這一個步驟, 使用ajax 的方式, 把一開始取得到的 tokenID 和檔案資訊(包括 附件在用的 fileid), 存入 附件temp table.

7. user 按下 "新增存檔" 或 "確認編輯" 的 submit button.

8. 把 user 所填的內容, insert (或 update) 進主檔, 並取得主檔資料的流水號(identity).

9. 把透過 flash object 上傳到 附件temp folder 裡的實體檔案, 搬家到系統專門放附件的資料夾裡.

10. 透過 tokenID(號碼牌) 到 附件temp table 裡, 把 user 剛輸入的附件的資訊(例如:標題,或是否公開...等欄位)再更新回 附件temp table 中.

11. user 有 "新增" 附件的時候, 就透過 tokenID(號碼牌) 取出 附件temp table 裡的資料, 再加上 主檔資料的流水號(identity) 後, insert 回去附件主題 table, 如果是 "編修" 即有附件的狀態, 就是用 update 的方式, 把 temp table 裡的值, update 回去 附件 table.

12. 刪掉 temp table 裡的同一個 tokenID 的資料.

13. 完成.


如果, 要參考看看相關的 table schema 或 code, 可以與我聯絡.

附註: 我使用的 flash 上傳元件, 是 swfupload, google 一下 swfupload 就可以看到很多相關教學與範例.