谷歌浏览器中的 HTML 输入类型 =“文件”不显示弹出窗口答案

【问题标题】：HTML input type=“file” in Google Chrome not showing popup window谷歌浏览器中的 HTML 输入类型 =“文件”不显示弹出窗口
【发布时间】：2014-04-10 07:54:18
【问题描述】：

我在使用 Google Chrome 中的 HTML 标记 <input type="file" /> 时遇到问题。

“浏览”按钮按预期显示在页面上，但是当我单击它以选择文件时，浏览器的弹出对话框窗口根本没有打开。

我已经在 Firefox 中测试了我的表单并且工作正常。有什么想法有什么问题，我该如何解决？

这里也是代码：

<form action="" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<label for="imgfile">File input</label>
<input type="file" name="imgfile" />

【问题讨论】：

输入应该在<form>标签中
我无法在最新版本的 Chrome 上复制这个：jsfiddle.net/j43C3
@Orlo 这应该没什么区别。无论表单标签是否存在，对话框都应该出现
相信你的答案就在这里：stackoverflow.com/questions/5260747/…
@Lykos 听起来可能是某个插件干扰了该元素。

标签： html forms google-chrome input

【解决方案1】：

没有理由这不应该在 Chrome 中工作。您是否尝试过将您提供给我们的示例中的标记复制到 HTML 文件中，然后打开它？它有效吗？它应该，除非有一些第三方插件或扩展阻止它。

可能是您在其他地方标记了导致此问题的；可能是输入字段上方的一层在点击事件可以到达“浏览”按钮之前捕获它？

【讨论】：

我在 Chrome 上安装的插件 (Colorzila) 似乎正在阻止它。我停用了它，重新启动 Chrome 并最终工作。
很高兴知道！以后我会留意的。感谢您的反馈。
同样的问题也发生在我身上。我禁用了所有插件，重新启动了 chrome，它又可以工作了。但是，当我重新启用所有插件并重新启动 chrome 时，它仍然可以工作。很奇怪！
测试哪些插件/插件导致此问题的一种好方法是一次禁用一个，每次都进行测试。不过仍然很奇怪，因为在 Firefox 中还没有发生这种情况（还）。
在我的情况下，我取消了弹出菜单的点击事件，所以我不得不更改以检查 e.target.type !== 'file'

【解决方案2】：

你必须这样使用它

    <form enctype="multipart/form-data">
    .......
    .......
    <label for="imgfile">File input</label>
    <input type="file" name="imgfile" />
    <input type="submit" name="submit" value="submit" />
    </form>

【讨论】：

如果我正确阅读了 OP。这不是问题。问题是弹出窗口无法打开。不是上传文件的问题。

【解决方案3】：

输入类型文件不起作用可能有两个原因。

文件类型输入的样式为可见性：隐藏。要隐藏输入，请使用 opacity:0。
文档或父元素上可能存在点击事件，阻止点击输入标签。

【讨论】：

【解决方案4】：

在我的情况下，问题如下：

整个文档都有一个“点击处理程序”
在点击处理程序中，代码使用
取消所有传播
返回假；

删除此返回语句解决了 input=file 的问题。

【讨论】：

宾果游戏。谢谢。
我的问题很相似，只是它是 event.preventDefault() 被调用的情况。似乎 click 事件传播到所有事件处理程序，然后如果没有被阻止，则会发生默认操作。我错误地认为孩子的默认操作会在事件传播到父母之前发生。
你救了我，非常感谢

【解决方案5】：

希望它对某人有所帮助；就我而言，问题是我将 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 );

我只希望我的自定义事件处理程序应用于一个 div，而不是整个文档，特别是我不希望我的事件处理程序覆盖表单事件，设置在另一个 div 中。因此，我将 eventListeners 的范围限制为“visualizationContainer”div：

document.getElementByID('visualizationContainer').addEventListener( 'click', onMouse, false );

这解决了一切。

【讨论】：

'鼠标未定义'

【解决方案6】：

这对我有用

<input type="file" id="fileProfile2" name="fileProfile2"  accept="image/png,image/jpeg"  ></input>

【讨论】：

大声笑，你有一个开始标签input和一个结束标签labelxd

【解决方案7】：

观察到的症状：“选择文件”按钮（来自 input type=file html 标记）不会弹出文件选择对话框。同一网页可在同一设备上的 Firefox（版本 68.5.0）上运行。

回答：如果出现无法选择上传文件的症状，请在 Android 上使用 Firefox。下面的代码确实适用于 Linux Chrome（版本 80.0.3987.87）。它也适用于 Windows 10 Chrome（版本 80.0.3987.122）。这似乎仅适用于 Android，并且可能仅适用于某些版本。

硬件：LG-H812 安卓版本：6.0 Chrome 版本：80.0.3987.117

代码：

<!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>

【讨论】：

【解决方案8】：

我在 Chrome 上安装的插件 (Colorzila) 似乎正在阻止它。我停用它，重新启动 Chrome 并最终工作。

【讨论】：

【解决方案9】：

我有一个类似的问题，我隐藏了input 元素并试图在用户单击表单标签时触发弹出窗口。

在我的例子中，标签元素上的for 属性与输入的id 不匹配。一旦我更新了标签上的for 以匹配输入的id，弹出窗口就很好了。

简单示例：

  <form>
    <label for="images">Click here to upload your images!</label>
    <input id="images" type="file" accept="images/*" style="display:none;" />
  </form>

我发现很难设置输入本身的样式，所以我隐藏了实际的输入元素并将标签设置为看起来像文件上传输入。

现在每当有人点击标签元素时，即使输入元素被隐藏，文件弹出窗口也会出现。

【讨论】：

【解决方案10】：

我知道问题不是我当前正在浏览的特定网页的问题，因为我去了 codepen 并尝试了各种文件上传器都无济于事。

在我的具体情况下，我几天前运行了 chrome 更新，但更新后未能重新启动 chrome。

导航到帮助 > 关于 Google Chrome，Google 已通知我需要重新启动。

重新启动后，浏览器原生文件选择器再次开始出现。

【讨论】：

也为我修复了。谢谢！使我免于调查一个不存在的错误。
谢谢，我非常深入地解决了这个问题，并找到了这个。只需重新启动 Chrome！

【解决方案11】：

在我的例子中，供应商 css 编写了一个默认 CSS 来隐藏要显示的输入类型文件：无，如下所示，删除/覆盖它，使浏览按预期工作。希望它可以帮助验证 input[type='file'] 的 css 是否是从其他地方驱动的。

//remove the below code
input[type="file"] {
 display: none;
}

【讨论】：

【解决方案12】：

这在 Chrome v88.0 上发生在我身上，我尝试了一切——删除所有事件处理程序，使最简单的形式成为可能，从页面中删除所有其他 html 和 js——但文件选择对话框仍然会单击“选择文件”按钮时不会出现。

然后我关闭了 Chrome 并重新打开它......它再次工作。

黄金建议：

您是否尝试将其关闭再打开？

【讨论】：

拯救我的一天-谢谢
拯救我的一天，但很好奇这里有什么问题？
对我来说也一样。在浏览了近 30 分钟的代码后，我只需要重新启动 Chrome 浏览器即可找出可能导致此问题的部分！！！！
@VishweshJainkuniya，我想，我知道为什么！重新启动 chrome 后，出于开发原因，我打开了浏览器控制台。我收到了 Google Chrome 更新消息。可能是这可能导致了这个问题。 Chrome 在后台更新，这可能会阻止打开文件对话框。
但是chrome更新跟这个有什么关系呢？无论如何，在重新启动 chrome 之前不会应用 chrome 更新，所以它应该像以前的版本一样工作，对吧？

【解决方案13】：

我在 ajax 请求中设置了 event.preventDefault()，这就是为什么输入值没有在表单数据中发送的原因

【讨论】：

【解决方案14】：

我遇到了同样的问题，它可以在 safari 中运行，但不能在 chrome 中运行。原来我只需要更新我的 chrome 浏览器。显然，如果您的 chrome 版本已经过时了两周，那么已经存在了十多年的功能...您知道最好的谷歌工程...

【讨论】：

谢谢！！！我花了几天（而不是几个小时）来处理这个愚蠢的限制。
突然浏览按钮在 Chrome 但 Safari 中不起作用。更新chrome版本后，它开始正常工作了。