如何更改html文件字段的行爲和樣式？

我想創建一個文件上傳字段，顯示一個input type=text（顯示文件名），上傳按鈕替換爲自定義圖像。如何更改html文件字段的行爲和樣式？

像這樣：

enter image description here

一個簡單的解決方案，而任何黑客將不勝感激。

來源

2012-05-30 TheOne

[你有什麼嘗試？]（http://www.whathaveyoutried.com/） –

我見過的所有解決方案都非常黑客。 – lanzz

@JohnConde：我在第一個谷歌搜索結果中嘗試了一堆js庫。他們有預定義的樣式，很難改變它們。 – TheOne

由於瀏覽器處理文件上傳字段的方式，您不會找到任何不是黑客的解決方案。由於安全問題，它們會限制您可以對它們執行的樣式量，以防止惡意網站使它們看起來不像它們。如何限制你是不同的瀏覽器，但瀏覽器，但沒有使用JavaScript和黑客技巧，你將無法通過直接的HTML/CSS風格的文件上傳領域的喜好。

來源

2012-05-30 13:54:17

<INPUT type="image" class="myButton" value=""> 

.myButton { 
background:url(YOUR IMAGE) no-repeat; 
cursor:pointer; 
width: 200px; 
height: 100px; 
border: none; 
}

使用按鈕

<button type="submit" style="border: 0; background: transparent"> 
<img src="/images/Btn.PNG" width="90" heght="50" alt="submit" /> 
</button>

來源

2012-05-30 13:56:49

這將顯示文件瀏覽器嗎？ – TheOne

如果您正在使用jQuery，來看看這個插件 - https://github.com/ajaxray/bootstrap-file-field

這個小插件會顯示文件的輸入字段作爲引導按鈕（帶可配置類），在所有瀏覽器中都相似，並且會精美地顯示選定的文件名（或選擇錯誤）。

此外，您可以使用簡單的數據屬性或JS設置來設置各種限制。 e，g，data-file-types="image/jpeg,image/png"將限制選擇除jpg和png圖像以外的文件類型。

來源

2016-06-08 20:28:34 Anis

如何更改html文件字段的行爲和樣式？

回答

相關問題