如何在 Google Chrome 中正常显示 HTML“文件”字段？答案

【问题标题】：How to display HTML "file" fields normally in Google Chrome?如何在 Google Chrome 中正常显示 HTML“文件”字段？
【发布时间】：2012-05-09 08:05:11
【问题描述】：

有一个PHP 文件包含一个公式<form，其中包含一个file 字段：

<input type="file" name="doc_fichier" maxlength="255" size="50">.

当我使用Firefox 打开页面时，该字段会很好地显示，如捕获的图像所示：

但是当我用Google Chrome 打开页面时，我得到了这个：

那么如何让Google Chrome正确显示元素呢？

【问题讨论】：

【解决方案1】：

没有“正确”的方式来显示文件字段，它取决于浏览器。

您的屏幕截图是在 Chrome 中显示文件字段的标准方式。

【讨论】：

【解决方案2】：

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

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

【讨论】：