解決input的file型別各瀏覽器的樣式相容

2021-07-14 22:49:58 字數 650 閱讀 8685

我們都希望做出的上傳可以是以下這種美觀的,但是原生的input file型別,不僅不美觀 ,而且各瀏覽器都顯示不同,如何解決呢?

美觀的

chrome下

firefox下

ie下

一般來說,我們會用「模擬」的方式,先把原生的file型別設定為透明(不是dispaly:none),然後用其它元素模擬出它的樣子,file覆蓋在之上。「上傳」按鈕再提交到伺服器。

目的是疊加成這種樣子,然後把file進行隱藏(紅色邊的是file型別的input),這樣各個瀏覽器的相容就都一樣了。盡量不要用原生的樣式。

以下是全部**

無標題文件title>

.upload-box

form

input

[type="file"]

input

[type="submit"]

.upload-choose

.upload-info

style>

head>

class="upload-box">

input的file一些實用屬性

file自帶一些有用的屬性,今天整理一下 html 1.multiple 是否多選,如果在html上面寫上multiple multiple 或者multiple就可以實現多選 2.accept 檔案格式,這個可以控制檔案格式,比如jpeg和gif還有png之類的,寫法是這樣的 js 1.name ...

input的型別彙總

en 文字型別 text 核取方塊型別 checkbox checked 顏色型別 color 日期型別 date 郵箱型別 email 提交型別 submit value 提交 檔案型別 file 型別 按鈕型別 button id btn2 數字型別 number id btn 單選型別 rad...

Flume之 File型別的Channel

允許所有的資料儲存在硬碟中。好處 資料永遠不丟失。壞處 因為使用磁碟的儲存方式會頻繁的發生磁碟i o,所以會極大的降低flume的吞吐量。配置項說明 type file datadirs 資料存放的目錄,可以使用多個,多目錄之間使用逗號分割即可。1.在job 檔案下建立新檔案file.templat...