javascript - 文件上传 document.ready .on ('submit' ) 提交两次

Question

使用node.js/express/jade。我想在不刷新页面的情况下上传文件，因此在 document.ready() 函数中使用 .on('submit') 函数，如下所示。问题是 POST 发生了两次，我不明白为什么。帮助会很棒。

HTML:

<form id="upSchema" action="/setVSSUP/6" enctype="multipart/form-data" method="post">
    <table id="tblSFU" class="table table-striped table-hover table-condensed">
        <tbody>
            <tr id="sVSFU">
                <td>
                    <input type="file" name="schemadoc">
                </td>
                <td>
                    <button onclick="onSSFUp(6)">Upload</button>
                </td>
            </tr>
        </tbody>
    </table>
</form>

客户端 JavaScript:

function onSSFUp(key) {
  $('#upSchema').submit();
}

文档准备就绪:

$(document).ready(function() {
  $(document).on('submit','#upSchema', function(e) {
    $('#schup').text('Starting Upload...');
    e.preventDefault();
    $(this).ajaxSubmit({
      error: function(xhr) {
        $('#schup').text('Error: '+xhr.status);
      },
      success: function(res) {
        $('#schup').text('File upload Success: '+res.name);
      }
    });
    document.getElementById('btnSSFU').disabled = false;
    return false;
  });
});

结果控制台:

POST /setVSSUP/6 200 81ms
POST /setVSSUP/6 200 114ms

Answer 1

表单内的按钮正在触发表单提交。然后，您向按钮添加一个额外的 onclick 事件 (onSSFUp(6))。删除 onclick 事件，当您单击按钮时，您将看到表单仍然被提交。