Question

我在Chrome中遇到<input type="file" />问题 - 它没有在“浏览”按钮附近显示文本框。在Chrome中显示标准文件输入（文本框+按钮）的最佳方法是什么？

Answer 1

这是Google Chrome和Safari的默认行为。阅读this博客了解解决方案

Answer 2

盒子在那里，虽然没有设计。它可能在窗口的“错误”一侧，但它就在那里。

就这件事而言 - 在它周围放一个边框 - 你会看到它就在那里。

  <input type="file" style="border: solid 1px red">

此外，选择文件后 - 您将获得其名称。

Answer 3

<input type="file"/>具有不同的视觉外观，具体取决于浏览器。在某些浏览器上，它是一个文本字段，其他按钮只有一个按钮。由于元素不是很有风格，所以你无能为力。

如果您真的希望文件上传的外观/行为与默认实现不同，那么闪存是可行的方法。

例如，许多网站都使用sfwUpload。为了获得完全的样式自由，您可以使其不可见，并通过定位将其置于html按钮之上。

使用文件上传输入的另一种方法是通过visibility: hidden使它们不可见，将它们放在其他元素之上，从而放弃使用flash，但实现很少很好，所以我不会不推荐它。

Answer 4

文件输入元素的样式取决于您的浏览器（可能是操作系统 - 我只使用过Windows）。如果您使用FF，IE和Chrome中的文件输入元素查看同一页面，它将在每个浏览器中显示不同。

为什么还需要显示文本框？在FF和IE中，无论如何都不能直接输入它，因此唯一的用法是显示所选文件的文件路径; Chrome已经为你做了什么，只是不在一个盒子里。

Answer 5

我找到了其他遇到此问题的人的链接solution here。

没有特别提到chrome，但safari显然做同样的事情。（该链接是在Chrome讨论中发布的已接受的答案）

编辑：哇，今天早上第二次我被其他会员用Google搜索了！至少问题得到了解答！

Answer 6

您可以覆盖默认行为并完全交换控件外观。今天发现this正在研究如何在fileupload上编辑css。

Answer 7

有时它只是由类似于这个的javascript代码引起的：

function someOnClickHandler(e)
{
    e.preventDefault();  // it kills the file dialog
}

// somewhere:
$('.some-selector-which-contains-the-file-elem').on('click', someOnClickHandler);

Answer 8

大多数时候，类型file的风格为display:none。在这种情况下，请使用!important显示输入字段。

<input id="cv_file" type="file" name="cv" style="display:block !important;"/>

Chrome中的HTML输入类型=“文件”不显示文本框

8 个答案: