HTML5檔案選擇框(各種型別)

2021-07-25 00:13:36 字數 791 閱讀 6590

<

input

type

="file"

accept

><

br><

br>

accept屬性列表

<

br>

這個就可以實現選擇具體的資料型別,但是有相容問題,我在測試的時候只有opera,chrome能用,火狐和ie都不相容

好吧,就在這裡測試一下吧:

我只想要word

在這裡如果想支援多種型別的話,比如金山的office和microsoft的office的不同副檔名,這樣的話可以在accept裡面放置多個屬性就可以了:

如果不限制影象的格式,可以寫為:accept="image/*"。同樣是可以的

好的,測試一下:

我只想要gif、bmp

嗯,測試成功,用opera,chrome能用,因為accept也是html5的新特性,所以火狐和ie的支援就顯得單薄了,這樣還是讓我們等待他們的接受把

測試了好久,發現gif和bmp一起的時候並不是能取得他們的並集,仔細觀察以後是按寫入順序排列了一下他們的「檔案選擇型別」:

就像是下面的一樣:

我們如果不定義input file的格式的時候,那麼檔案型別的地方就是全部檔案*.*,如果我們定義了自己的,那麼檔案型別就會和我們選中的一樣,但是這時候我們如果想看別的檔案的時候還是可以通過檔案型別的下拉框,去選擇自己額外喜歡的型別的,簡單的說,它就是起到了乙個簡單的按照我們的主觀意願篩選的作用,同時我們如果不是選擇的image/*而是好幾個並列的話就會按照上面的情況分別得排列出來,比如圖上的我input就是這個樣子的:

HTML5 檔案上傳

源 function getobjecturl file var url null if window.createobjecturl undefined else if window.url undefined else if window.webkiturl undefined return u...

html5檔案 上傳

表單提交檔案是最常見的場景,使用者選擇檔案後,觸發了檔案選擇框的change事件,通過訪問檔案選擇框元素的files屬性可以拿到選定的檔案列表。如果檔案選擇框指定了multiple,則乙個檔案選擇框可以同時選擇多個檔案,files包含了所有選擇的檔案物件 如果沒有指定,則只能選擇乙個檔案,files...

HTML5 檔案讀取

檔案讀取 title head body input type file class file multiple img src alt id img script 由於 檔案的src屬性,可以通過採用網路位址或base64的方式顯示,因此我們可以利用readasdataurl實現對的預覽。獲取檔案...