html - 隐藏输入类型=“文件”提交更改

Question

我需要一个看起来不像默认的“选择文件”按钮的文件上传按钮。

因此我有一个风格<button>和一个隐藏 input[type="file"]

然而，似乎每次我点击<button>父母<form>都会提交，我不明白为什么。没有 javascript 触发表单提交。它在文件选择器对话框打开时提交，因此POST请求根本没有发送文件。

我希望它提交表单，但只有在我选择了一个文件之后（文件输入已更改）

<form action="/upload.php" method="post" name="ta_file_upload" enctype="multipart/form-data">
    <input type="file" id="tableUpload1" name="files[]" style="visibility:hidden;" onchange="alert();" /> <!-- no alert is fired! -->
    <button class="btn btn-dark table-button table-button-upload" onclick="document.getElementById('tableUpload1').click()" title="Upload">UploadButton</button>
</form>

这alert();是出于测试目的 - 它不会被触发：没有警报。

该错误与特定浏览器无关（在 chrome + firefox 中测试）

标签： htmlforms