自定义输入：文件 - 在Firefox下阻止表单提交

Question

目标

我正在尝试创建/使用完全可自定义的跨浏览器CSS input:file。我隐藏了我的输入并将其包装在一个按钮中，以便能够在此按钮上应用CSS：

$('button').on('click', function(event) {
    console.log('button.click');
    event.preventDefault();
    event.stopPropagation();
    $(this).find(':file').click();
    return false;
});
$(':file').click(function(event) {
    console.log('file.click');
    event.stopPropagation();
});
$(':file').change(function(event) {
    console.log('file.change');
    event.preventDefault();
    // ...
});

button {
	position: relative;
	overflow: hidden;
}
button > input[type=file] {
	position: absolute;
	top: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<form enctype="multipart/form-data" method="post">
    <button type="button">
        Import file
        <input type="file" name="file"/>
    </button>
</form>

（我添加了一些jQuery来将这些元素链接在一起）

预期行为

在Chrome下，它的工作原理应该如下：

{li> on button.click，file.click被触发
• 我们选择我们的文件
• file.change已触发，我们可以进行自定义处理

问题

问题是Firefox在button.click之后重新加载页面，然后我们得到了这个序列：

• 在button.click上，file.click被触发，并且表单已提交
• 我们选择我们的文件
• file.change被触发，用于旧版input:file （由于页面已重新加载，因此不再存在）
• 未检测到新file的更改，我们无法进行治疗

我不确定是否像我想的那样明确。使用调试工具在Chrome和Firefox下运行代码段以查看差异。

Answer 1

您错过=中的type="button"，不是吗？添加它应该会有所帮助。