jquery - 如何ajax提交这个没有提交按钮的表单？

Question

我有以下表格：

<form enctype="multipart/form-data" action="uploader.php" method="POST">
<input name="uploadedfile" type="file" />
</form>

一旦用户点击了上传的文件输入并选择了一个文件，他们就可以在页面的不同区域点击这个按钮：

<a id="button">My button</a>

怎么能点击我的按钮，怎么会触发表单的上传呢？重要提示：不能在表单内，也不能是输入元素。这也必须是一个 ajax 风格的操作，如果可能的话不重新加载页面。

Answer 1

您可以给表单一个 ID（或使用多种变体之一来选择表单）：

<form id="myForm" [...] >

并使用 jQuery提交表单：

$('#myForm').submit();

您希望提交功能在按钮的单击事件中：

$('#button').click(function(){
    $('#myForm').submit();
});

更新

要使用 ajax 提交表单，您可以执行以下操作：

$('#button').click(function(){
      var form = $('#myForm');
        $.ajax({
          url: form.attr('action').val()  ,
          type: 'POST' ,
          data: form.serialize()
        });
    });

如果您正在上传文件，您可能需要查看以下 jQuery 插件之一：

• jQuery Ajax 文件上传插件
• 多文件上传插件

Answer 2

只需获取对表单的引用，然后调用.submit它：

$("#button").click(function() {
    $("form[action='uploader.php']").submit();
});

最好也给表单一个id，这样您就可以使用更主流的选择器来选择它，例如$("#theForm").

Answer 3

您可以使用jQuery触发功能

$("#button").click(function(){
    $("form").trigger('submit');
})​;

在这里查看演示

Answer 4

您可以像上面的答案一样做，或者您可以提交表单，甚至无需刷新页面，如HERE