Question

我在谷歌浏览器中遇到HTML标记<input type="file" />的问题。

浏览＆＃39;按钮按预期显示在页面上，但是当我单击它以选择文件时，浏览器中的弹出对话框窗口根本不会打开。

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

以下是代码：

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

Answer 1

就我而言，问题如下：

整个文档有一个＆＃34; on click handler＆＃34;
在点击权限内部，代码正在取消所有传播

return false;

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

Answer 2

没有理由认为这不适用于Chrome。您是否尝试过将您提供给我们的示例中的标记复制到HTML文件中并打开它？它有用吗？它应该，除非有一些第三方插件或扩展程序停止它。

可能是您在其他地方有标记导致此问题;或许输入字段上的一个图层可以捕获点击事件，然后才能进入“浏览”按钮？

Answer 3

输入类型文件无法正常工作有两个原因。

文件类型输入的样式为visibility：hidden。要隐藏输入，请使用不透明度：0。
文档或父元素上的click事件可能会阻止点击输入标记。

Answer 4

这对我有用

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

Answer 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 );

修复了一切。

Answer 6

观察到的症状：“选择文件”按钮（来自输入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 Android版本：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>

Answer 7

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

Answer 8

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

就我而言，label元素上的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>

我发现很难对输入本身进行样式设置，因此我隐藏了实际的输入元素并设置了标签样式，使其看起来像文件上载输入。

现在，只要有人单击标签元素，即使输入元素被隐藏，文件弹出窗口也会出现。

Answer 9

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

在我的特定情况下，几天前我运行了chrome更新，但是更新后无法重新启动chrome。

导航至帮助>关于Google Chrome，Google通知我必须重新启动。

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

Answer 10

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

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

Answer 11

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

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

黄金建议：

<块引用>

你有没有试过把它关掉再打开？

Answer 12

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

Answer 13

你必须像这样使用它

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

Google Chrome中的HTML输入类型=“文件”未显示弹出窗口

13 个答案: