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

Question

我在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" />

Answer 1

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

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

Answer 2

就我而言，问题如下：

1. 整个文档有一个“on click handler”
2. 在内部点击处理程序中，代码正在取消所有传播 返回false;

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

Answer 3

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

1. 文件类型输入的样式为visibility：hidden。要隐藏输入，请使用opacity：0。
2. 文档或父元素上的click事件可能会阻止单击输入标记。

Answer 4

希望它可以帮助某人;在我的情况下，问题是我有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 5

你必须像这样使用它

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