谷歌浏览器中的 HTML input type="file" 不显示弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22245500/
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 Google Chrome not showing popup window
提问by ltdev
I'm having a problem with the HTML tag <input type="file" />in Google Chrome.
我<input type="file" />在使用 Google Chrome 中的 HTML 标签时遇到问题。
The 'Browse' button appears on the page as expected, but when I click it in order to select a file, the pop-up dialog window from the browser doesn't open at all.
“浏览”按钮按预期出现在页面上，但是当我单击它以选择文件时，浏览器中的弹出对话框根本没有打开。
I 've tested my form and in Firefox and works correct. Any ideas what's wrong and how can I fix it ?
我已经在 Firefox 中测试了我的表单并且工作正常。任何想法出了什么问题，我该如何解决？
Here is also the code:
这里也是代码：
<form action="" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<label for="imgfile">File input</label>
<input type="file" name="imgfile" />
采纳答案by Philip Bennison
There's no reason that this shouldn't work in Chrome. Have you tried copying JUST the mark up in the example you've given us into a HTML file, and opening that? Does it work? It should, unless there's some third party plugin or extension stopping it.
没有理由认为这在 Chrome 中不起作用。您是否尝试将示例中的标记复制到 HTML 文件中，然后打开它？它有效吗？它应该，除非有一些第三方插件或扩展阻止它。
It may be that you have have mark up elsewhere causing this issue; perhaps a layer over the input field catching the click event before it can make it's way down to the "browse" button?
可能是您在其他地方进行了标记导致此问题；也许在输入字段上有一层捕捉点击事件，然后才能让它向下到“浏览”按钮？
回答by Mitja Gustin
In my case the problem was as follows :
就我而言，问题如下：
- Whole document had a "on click handler"
Inside click hander, the code was canceling all propagation with
return false;
- 整个文档有一个“点击处理程序”
在点击处理程序中，代码取消了所有传播
返回假；
Removing this return statement solved problem with input=file.
删除这个 return 语句解决了 input=file 的问题。
回答by Shahrukh Azeem
There could be two reasons for the input type file not working.
输入类型文件不起作用可能有两个原因。
- The file type input is styled as visibility: hidden. To hide the input use opacity:0.
- There may be click event on document or parent element resisting click on input tag.
- 文件类型输入的样式为可见性：隐藏。要隐藏输入，请使用 opacity:0。
- 文档或父元素上的点击事件可能会阻止点击输入标签。
回答by ravi
this worked for me
这对我有用
<input type="file" id="fileProfile2" name="fileProfile2" accept="image/png,image/jpeg" ></label>
回答by David
Observed Symptoms: The "Choose File" button (from the input type=file html tag) does not pop a file selection dialog. Same web page works on Firefox (version 68.5.0) on the same device.
观察到的症状：“选择文件”按钮（来自 input type=file html 标签）不会弹出文件选择对话框。同一网页可在同一设备上的 Firefox（版本 68.5.0）上运行。
Answer: Use Firefox on Android if the failure to select a file for upload symptoms appear. The code below does work on Linux Chrome (version 80.0.3987.87). It also works on Windows 10 Chrome (version 80.0.3987.122). This seems to only apply to Android and likely only certain versions.
答：如果出现无法选择文件进行上传的症状，请在 Android 上使用 Firefox。下面的代码适用于 Linux Chrome（版本 80.0.3987.87）。它也适用于 Windows 10 Chrome（版本 80.0.3987.122）。这似乎仅适用于 Android 并且可能仅适用于某些版本。
Hardware: LG-H812 Android version: 6.0 Chrome version: 80.0.3987.117
硬件：LG-H812 安卓版本：6.0 Chrome 版本：80.0.3987.117
Code:
代码：
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>t9.php</title>
</head>
<body>
<h1>t9.php</h1>
<form method='post' enctype='multipart/form-data'>
<input type='file' name='filename'/><br>
<br>
<input type='submit' name='submit' value='submit'/><br>
<br>
</form>
</body>
</html>
回答by Yii2Developer
It seems that a plugin (Colorzila), that I had installed on Chrome, was stopping it. I deactivated it, restart the Chrome and worked eventually.
我在 Chrome 上安装的插件（Colorzila）似乎正在阻止它。我停用了它，重新启动 Chrome 并最终工作。
回答by Mark Scott Lavin
Hope it helps someone; in my case the issue was that I had event.preventDefault()applying to the whole document, because I had my eventListener applying to the whole document:
希望对某人有所帮助；在我的情况下，问题是我event.preventDefault()申请了整个文档，因为我的 eventListener 申请了整个文档：
function onMouse( event ) {
event.preventDefault();
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
mouseEventHandler( event );
}
document.addEventListener( 'click', onMouse, false );I only wanted my custom event handlers to apply to one div, not to the whole document, and specifically I didn't want my event handlers overriding the form events, set up in another div. So I limited the scope of my eventListeners to the 'visualizationContainer' div:
我只希望我的自定义事件处理程序应用于一个 div，而不是整个文档，特别是我不希望我的事件处理程序覆盖在另一个 div 中设置的表单事件。因此，我将 eventListeners 的范围限制为“visualizationContainer”div：
document.getElementByID('visualizationContainer').addEventListener( 'click', onMouse, false );
document.getElementByID('visualizationContainer').addEventListener( 'click', onMouse, false );
That fixed everything.
那解决了一切。
回答by ventsi.slav
You must use it like this
你必须像这样使用它
<form enctype="multipart/form-data">
.......
.......
<label for="imgfile">File input</label>
<input type="file" name="imgfile" />
<input type="submit" name="submit" value="submit" />
</form>
