Question

我没有使用<input type="file">标签，而是想要一个启动文件浏览器对话框的按钮。

我的第一个想法是拥有一个隐藏的文件输入标签和一个按钮。我使用按钮点击按钮来激活隐藏文件输入的onclick，但我无法正常工作。

所以问题是，这甚至可能吗？第二是有更好的方法来做到这一点，仍然能够以表格形式发回信息吗？

这将是降级功能的底层（从Flash到JavaScript（我们的站点在没有JS的情况下不起作用））因此它必须只使用基本的JS和HTML。

Answer 1

是的，通过不透明度可以（在大多数浏览器中）。 Here's a tutorial

Answer 2

我过去做过这个（见ceejayoz的答案），但现在建议不要这样做。这是一个安全问题，未来不能依赖它。一个更好的解决方案是逐步增强您的上传表单，以便将文件输入替换为具有更多功能的基于Flash或Java的上传器（或者如果可用，则使用HTML 5中的更好功能）。

Answer 3

我建议使用基于Flash的文件上传器SWFUpload，而不是试图破解浏览器的文件输入控件。我已经开始在我的一个项目中使用它，并且对它非常满意。

你得到了javascript回调，你可以为UI做任何你想做的事情（flash只是上传功能）。

Answer 4

我宁愿避免使用透明度技巧。

这对我有用（使用jQuery）：

$("#upload-box").change(function(){
    $("#upload-click-handler").val($(this).val());
});
$("#upload-click-handler").click(function(){
    $("#upload-box").click();
});

HTML：

<input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" />
<input id="upload-click-handler" type="text" readonly />

它创建一个文本输入，一个隐藏的上传输入，以及对输入到隐藏文件输入的文本的点击（=路由）。

选择文件后，它会在文本输入中回写文件名，与大多数用户对界面的期望一致。

应该适用于FF，Chrome，IE9和+。我没有在IE8上测试它。

这是一个jsfiddle。如果您喜欢，请感谢您对我的回答。

Answer 5

您可以在没有任何安全问题的情况下执行此操作只需onmouseenter上的代码就可以提升真实上传按钮的zindex（你可以在其上使用不透明度或使其透明）然后你就不需要触发点击而只需使用用户的点击。

在JavaScript中，是否可以通过编程方式启动文件浏览器对话框？

5 个答案: