Chrome 中的 HTML input type="file" 不显示文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5260747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML input type="file" in Chrome does not show textbox
提问by AEMLoviji
I have problem with <input type="file" />in Chrome - it does not show the textbox near the 'browse' button. What is a best way to show a standard file input (textbox+button) in Chrome?
我<input type="file" />在 Chrome 中遇到问题- 它没有显示“浏览”按钮附近的文本框。在 Chrome 中显示标准文件输入（文本框+按钮）的最佳方式是什么？
采纳答案by Fraz Sundal
回答by Radagast the Brown
The box is there, although it is not designed. It might be on the "wrong" side of the window, but it's there.
盒子在那里，虽然它不是设计的。它可能在窗口的“错误”一侧，但它就在那里。
Just for the matter - put a border around it - and you'll see it's there.
只是为了这个问题 - 在它周围放置一个边框 - 你会看到它在那里。
<input type="file" style="border: solid 1px red">
Also, after you select a file - you get the name of it.
此外，在您选择一个文件后 - 您会得到它的名称。
回答by Martin Jespersen
<input type="file"/>has different visual appearance depending on the browser. On some browsers it is a text field with a button in others its just a button. Since the element isn't very styleable there isn't much you can do about it.
<input type="file"/>根据浏览器的不同，具有不同的视觉外观。在某些浏览器上，它是一个带有按钮的文本字段，而在其他浏览器中它只是一个按钮。由于该元素不是很有风格，因此您无能为力。
If you really want a file upload to look/behave different from the default implementation flash is the way to go.
如果您真的希望文件上传的外观/行为与默认实现不同，那么 Flash 就是您要走的路。
For example many sites use sfwUpload. For full styleing freedom, you can make it invisible and place it on top of a html button via positioning.
例如，许多站点使用sfwUpload。为了获得完全的样式自由，您可以使其不可见并通过定位将其放置在 html 按钮的顶部。
Another way to work with the file upload inputs are to make them invisible via visibility: hidden, position them on top of other elements and thus forgo the use of flash, but the implementations are rarely very nice, so i wouldn't recommend it.
处理文件上传输入的另一种方法是通过 使它们不可见visibility: hidden，将它们放置在其他元素的顶部，从而放弃使用 flash，但实现很少非常好，所以我不会推荐它。
回答by Anthony Grist
The file input element is styled differently depending on your browser (and probably OS - I've only ever used Windows). If you look at the same page with a file input element in FF, IE and Chrome, it will appear differently in each browser.
文件输入元素的样式取决于您的浏览器（可能还有操作系统 - 我只使用过 Windows）。如果在 FF、IE 和 Chrome 中查看带有文件输入元素的同一个页面，它在每个浏览器中的显示都会不同。
Why do you need to display the textbox anyway? In FF and IE you can't type directly into it anyway, so the only usage would be to display the filepath of the selected file; which Chrome already does for you, just not in a box.
为什么你需要显示文本框呢？在 FF 和 IE 中，无论如何你都不能直接输入，所以唯一的用法是显示所选文件的文件路径；Chrome 已经为你做了，只是不在一个盒子里。
回答by j_syk
I found a link from someone else who was having this problem, solution here.
我从遇到此问题的其他人那里找到了一个链接，解决方案在这里。
It doesn't specifically mention chrome, but safari does the same thing apparently. (The link was an accepted answer posted in a chrome discussion)
它没有特别提到 chrome，但 safari 显然做了同样的事情。（该链接是在 chrome 讨论中发布的已接受答案）
edit: wow, second time this morning that I've been out googled by another member! at least questions are getting answered!
编辑：哇，今天早上我第二次被另一个成员用谷歌搜索了！至少问题得到了回答！
回答by Steven Mark
回答by christian
Sometimes it is just caused by a javascript code similar to this one:
有时它只是由类似于此的 javascript 代码引起的：
function someOnClickHandler(e)
{
e.preventDefault(); // it kills the file dialog
}
// somewhere:
$('.some-selector-which-contains-the-file-elem').on('click', someOnClickHandler);
回答by Choxmi
Most of the times type filegot display:nonestyle. In that case use !importantto display the input field.
大多数时候类型file都有display:none风格。在这种情况下，用于!important显示输入字段。
<input id="cv_file" type="file" name="cv" style="display:block !important;"/>
<input id="cv_file" type="file" name="cv" style="display:block !important;"/>
