javascript - 使用另一个按钮触发单击 type=file 会导致意外行为

Question

我正在尝试创建自己的“上传”按钮而不是默认按钮。通过点击我的自定义按钮，我触发了对原始上传按钮的点击:

HTML:

 <form id="myForm" enctype="multipart/form-data" action="api/upload.php" method="POST">
     <input type="hidden" name="MAX_FILE_SIZE" value="5120000" />
     <input name="userfile" type="file" class="choose-file"/>
     <button class="choose-picture"></button>
     <input type="submit" class="send-button" value='' />
 </form>

JS:

$('.choose-picture').click(function() {
    $('.choose-file').trigger('click');
});

我有另一个脚本显示当我点击提交按钮时上传的图片。如果我使用原始的上传文件按钮，什么也没有发生，这没关系(图片只在我选择并提交后才会显示)，但是当我点击我的自定义(.choose-picture)按钮时，它就像我已经选择了一个文件进行上传，在 img 源中放置了一些困惑并显示了一个非 img(当源错误时你看到的图标)。

这是控制台说的:

GET http://localhost/OrlenOla/%3Cbr%20/%3E%3Cb%3ENotice%3C/b%3E:%20%20Undefined…api/upload.php%3C/b%3E%20on%20line%20%3Cb%3E10%3C/b%3E%3Cbr%20/%3Euploads/ 403 (Forbidden) 

所以就好像我已经调用了我的上传脚本(我不打算在这个阶段调用它，因为它应该在提交时发生)。

为什么会这样？我该如何解决？

Answer 1

如果您没有明确指定 type <button> 上的属性元素，它被视为您明确声明为 type="submit" (即用于提交表单的按钮):

submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
_Source

这就是它触发您的表单提交事件处理程序代码的原因，因为它确实提交了表单。

解决此问题的最简单方法是指定 type="button"在元素上:

<button type="button" class="choose-picture"></button>

另一种方法(如您所见)是阻止按钮的默认行为:

$('.choose-picture').click(function(e) {
    e.preventDefault();
    $('.choose-file').trigger('click');
});