jquery - 使用自定义按钮覆盖文件输入按钮

Question

我正在尝试设置输入类型=文件的样式。

当我尝试使用自定义按钮覆盖默认按钮时(以便我可以对其进行样式设置)。我面临的问题是，每当我单击自定义按钮时，都会提交表单并启动验证。有没有办法可以修复它。

HTML

<input type="file" name="upload" id="upload" class="upload"/>
<button class="fileButton" id="fileButton">Choose File</button>
<input type="submit" name="button" value="Contact Me" class="supportButton"></input>

最后输入的是我的表单提交按钮。

Javascript:

<script type="text/javascript">
 $('#fileButton').click(function(){
 $('#upload').click();
 alert("input");
 });
</script>

当我单击自定义按钮时，它会触发文件上传按钮(我可以浏览和上传文件)，但同时会提交表单。

fiddle :http://jsfiddle.net/uw5wqxpw/

Answer 1

如果您使用type="button"，它将不会提交表单。如果未声明，button 的默认 type 为 submit。因此，当您单击它时，它会按照默认行为提交表单

<button type="button" class="fileButton" id="fileButton">Choose File</button>