1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. [HTML5教學] HTML5 Drag&Drop拖拉上傳檔案(可直接套用)

[HTML5教學] HTML5 Drag&Drop拖拉上傳檔案(可直接套用)

2011/09/26

梅問題-html教學-html5檔案拖拉上傳

  最近有不少網站也漸漸的使用Html5新功能,像是前陣子Gmail在寄信時,則可以直接把附件檔案,透過拖拉的方式,直接丟上去,就會自動將檔案上傳,以及像min.us網站,也是直接透過拖拉的方式,就可將檔案上傳,由此可見拖拉上傳,確實有它的便利性,不用像從前得透過瀏覽鈕,來選擇要上傳的檔案,而這個拖拉上傳的功能,梅干一開始以為是js的元件,詢問好友男丁後,才知道原來這是Html5的新功能,再歷經梅干一翻的努力後,總於完成了拖拉上傳的美夢,並且當檔案重覆時,還會自動更名喔!而各位完全不需寫任何的Code,直接下載完畢,上傳到PHP空間中,再把data的屬性設成777,就大功告成囉!


Html5 Drag&Drop拖拉上傳:

所需平台:PHP
適用瀏覽器:Firefox、Google Chrome、Safari
參考文件:
http://code.google.com/p/html5uploader/
http://html5demos.com/

Step1
下載上傳到PHP空間後,再把data的屬性設成777,開啟瀏覽器,直接將要上傳的檔案拖拉到虛線框中。
梅問題-html教學-html5檔案拖拉上傳


Step2
放開滑鼠後就會開始上傳,上傳完畢後,在圖片下方就會出連結網址。
梅問題-html教學-html5檔案拖拉上傳


Step3
點一下連結網址,就會開啟原始檔案路徑啦!
梅問題-html教學-html5檔案拖拉上傳


  由於梅干沒有限制任何的副檔,因此什麼檔案都可直接拖拉上傳,而這邊梅干也提供原始檔案,如有興趣的朋友,也可自行研究,若懶的研究的朋友,也可直接下載使用。立即就可實現拖拉上傳檔案的夢想囉!由於這是採用Html5的拖拉語法,所以並不支援IE瀏覽器喔!


[範例下載] [範例預覽]