HTML5 的拖拉檔案上傳 ( Drag & drop files Upload )

參考:

重點有

  1. 將物件設定為可拖 (Drag) 的狀態,在此是想要實現拉檔案到網頁直接上傳,所以此步驟可省略
  2. 在指定的對象放開檔案 (Drop) ,設定觸發的 ondrop 事件
  3. 從事件的 dataTransfer 物件內取得所需資料

將功能實作成 jQuery Plugin

參考: How to Create a Basic Plugin

如此就可以自己包合用的外掛

html5uploader

請到這裡下載: html5uploader – Drag & drop files to browser using HTML 5, PHP and JS – Google Project Hosting

實作步驟

  1. 使用 Google Chrome 或 Mozilla Firefox 測試功能
  2. 修改 uploader.php 上傳處理及路徑
  3. 上傳頁面增加表單檔案上傳,處理不支援 HTML5 瀏覽器
  4. 整合系統,增加傳遞值。主要工作在 HTML5 JavaScript 的 HTML POST 格式處理

上傳網頁處理,增加不支援 HTML5 的表單上傳

上傳頁面改用 jQuery 載入 Javascript 以及增加系統所需傳遞參數

使用 Mozilla Firefox 的 Live HTTP Headers 附加元件追蹤 HTTP header

瞭解 HTML POST 格式後,修改 html5uploader.js 程式

Firefox 3.6 中文檔名傳遞錯誤問題

參考此篇 ajax中文拋出異常 – ITeye問答 ,將 filename 使用 encodeURI() 處理即可

對於 uploader.php 的認知, elseif () 那段和上傳方式沒關係

624 total views, 2 views today

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。