如何更改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图像之外的文件类型。