Chrome 中的 HTML input type="file" 不显示文本框

Question

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

Answer 1

这是 Google chrome 和 Safari 的默认行为。 阅读此博客以获取解决方案

Answer 2

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

只是为了这个问题 - 在它周围放置一个边框 - 你会看到它在那里。

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

此外，在您选择一个文件后 - 您会得到它的名称。

Answer 3

<input type="file"/>根据浏览器的不同具有不同的视觉外观。 在某些浏览器上，它是一个带有按钮的文本字段，而在其他浏览器中它只是一个按钮。 由于该元素不是很有风格，因此您无能为力。

如果您真的希望文件上传的外观/行为与默认实现不同，那么 Flash 就是您要走的路。

例如，许多站点使用sfwUpload 。 为了获得完全的样式自由，您可以使其不可见并通过定位将其放置在 html 按钮的顶部。

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

Answer 4

您可以覆盖默认行为并一起交换控件外观。 今天发现这个研究如何编辑文件上传的css。

Answer 5

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

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

Answer 6

我从遇到此问题的其他人那里找到了一个链接，解决方案在这里。

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

编辑：哇，今天早上我第二次被另一个成员用谷歌搜索了！ 至少问题得到了回答！

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;"/>