html - 如何更改 html 文件字段的行为和样式？

Question

我想创建一个显示input type=text（显示文件名）的文件上传字段，上传按钮替换为自定义图像。

像这样的东西：

一个没有任何黑客的简单解决方案将不胜感激。

Answer 1

由于浏览器如何处理文件上传字段，您将找不到任何不是黑客的解决方案。出于安全考虑，它们限制了您可以对它们进行的样式设置，以防止恶意网站使它们看起来不像。您的限制程度因浏览器而异，但如果不使用 JavaScript 和 hacky 技巧，您将无法通过直接的 HTML/CSS 设置您喜欢的文件上传字段样式。

Answer 2

 <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>

Answer 3

如果您使用的是 jQuery，请查看此插件 - https://github.com/ajaxray/bootstrap-file-field

这个小插件会将文件输入字段显示为引导按钮（带有可配置的类），在所有浏览器中都类似，并且会漂亮地显示选定的文件名（或选择错误）。

此外，您可以使用简单的数据属性或 JS 设置来设置各种限制。例如，data-file-types="image/jpeg,image/png"将限制选择除 jpg 和 png 图像之外的文件类型。