使用 AjaxForm 时以编程方式提交表单

Posted 2023-02-16

【中文标题】使用 AjaxForm 时以编程方式提交表单

【英文标题】：Programmatically submitting a form while using AjaxForm

【发布时间】：2011-01-31 21:19:03

【问题描述】：

我想找到一种在后台上传单个文件的方法*，在选择文件后让它自动启动，并且不需要 Flash 上传器，所以我尝试使用两种很棒的机制（jQuery.Form 和 JQuery多文件）在一起。我没有成功，但我很确定这是因为我错过了一些基本的东西。

仅使用MultiFile，我将表单定义如下...

<form id="photoForm" action="image.php" method="post" enctype="multipart/form-data">

文件输入按钮定义为...

<input id="photoButton" "name="sourceFile" class="photoButton max-1 accept-jpg" type="file">

而 javascript 是...

$('#photoButton').MultiFile(
    afterFileSelect: function()
         document.getElementById("photoForm").submit();
    
);

这非常有效。一旦用户选择了一个文件，MultiFile 就会将表单提交给服务器。

---

如果不使用 MultiFile，如上所示，假设我包含一个提交按钮以及定义如下的 JQuery 表单插件...

 var options = 
  success: respondToUpload
 ; 

 $('#photoForm').ajaxForm(options);

...这也很有效。单击提交按钮时，表单将在后台上传。

---

我不知道该怎么做就是让这两者一起工作。如果我使用 Javascript 提交表单（如上面的 MultiFile 示例所示），表单已提交但未调用 JQuery.Form 函数，因此不会在后台提交表单。

我想也许我需要按如下方式更改表单注册...

$('#photoForm').submit(function() 
 $('#photoForm').ajaxForm(options);
);

...但这并没有解决问题。当我尝试使用 .ajaxSubmit 而不是 .ajaxForm 时也是如此。

我错过了什么？

顺便说一句：我知道使用 MultiFile 进行单文件上传可能听起来很奇怪，但想法是文件的数量将根据用户的帐户而动态变化。所以，我从一个开始，但数量会根据条件而变化。

【参考方案1】：

答案竟然简单得令人尴尬。

而不是使用...以编程方式提交

document.getElementById("photoForm").submit();

...我用过...

$("#photoForm").submit();

---

另外，由于我只需要偶尔上传多个文件，所以我使用了一种更简单的技术......

1) 形式和我原来的一样……

<form id="photoForm" action="image.php" method="post" enctype="multipart/form-data">

2) 文件输入字段基本一致...

<input id="photoFile" "name="sourceFile" style="cursor:pointer;" type="file">

3) 如果文件输入字段发生变化，则执行提交...

$("#photoFile").change(function() 
    $("#photoForm").submit();
);

4) AjaxForm 监听器做它的事...

var options = 
    success: respondToUpload
; 
$('#photoForm').ajaxForm(options);