Question

我正在为HTML表单中的文件输入设置外观。我通过隐藏输入来实现结果，然后我设计了自己的按钮并在该按钮上单击，我在隐藏的输入上触发click事件，以打开本机浏览窗口。这很有效，但是当我关闭浏览窗口时，会在窗体上触发Javascript提交处理程序（但实际上没有提交，只触发事件）。

我准备了一个小提琴：http://jsfiddle.net/Ebcu5/

HTML：

<form id="form">
    <input id="file" type="file" name="photo" />
    <button id="upload">Browse</button>
</form>

JS：

$("#form").submit(function(){
    alert('submit event triggered');
});

document.getElementById('upload').addEventListener('click',function(){
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true);
    uploading = true;
    document.getElementById('file').dispatchEvent(evt);
});

CSS：

input#file { position: fixed; top: -100px; }
button { border: solid 3px black; border-radius: 3px; font-size: 18px; line-height: 20px; text-transform: uppercase; font-family: Arial; line-height: 31px; background: #fd6706; border-radius: 13px; }

Answer 1

解决。只需在上传点击事件处理程序中使用evt.preventDefault（）。

更新了小提琴：http://jsfiddle.net/Ebcu5/2/

document.getElementById('upload').addEventListener('click',function(evt){
                evt.preventDefault();
    document.getElementById('file').click();
});

Answer 2

更改：<button id="upload">Browse</button>

收件人：<button id="upload" type="button">Browse</button>

归功于Kevin B对另一个答案的评论：

或只是将按钮设为按钮。 type =“button” - Kevin B 2013年11月26日22:35

只是想让它成为一个真正的答案，所以人们会在没有通过评论的情况下看到它。

为什么在文件输入上触发click事件会触发在表单上提交事件？

2 个答案: