pCloud Partner Program

多個檔案上傳-multiple upload with HTML5

程式技術/Javascript 2012/08/08 18:50
views: 89006 times
在以往 form 中使用上傳元件, 只能做單檔上傳, 一個 input type=file 只能做一個檔案, 若是需要做多個檔案同時上傳, 得需要使用多組 input type=file 或是利用 flash 來達成.

不過在 HTML5 中, 定義了 multiple 屬性, 讓 input type=file 可以同時傳上來多個檔案. 來看看用法吧.



就這麼簡單, 在原來的 input type=file 多加個 multiple 即可, 這樣功能就可以達成多個檔案上傳了, 不過若是要限制檔案數, 就得要用 client javascript 來進行檢查, 在 onsubmit 時, 做個數檢查即可.

接下來就看範例囉, 放在這裡: http://sample.diary.tw/28/lm.php

這個範例利用了 file 及 size 屬性將上傳檔案的檔名及大小列出來, 不過不會上傳, 不用擔心, 純在客戶端執行的!
top

Trackback Address :: http://diary.tw/tim/trackback/1006

Write a comment


PREV : [1] : ... [151] : [152] : [153] : [154] : [155] : [156] : [157] : [158] : [159] : ... [472] : NEXT



Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...