2

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

仅使用 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 进行单文件上传可能听起来很奇怪,但想法是文件的数量将根据用户的帐户而动态变化。所以,我从一个开始,但数量会根据条件而变化。
4

1 回答 1

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);
于 2010-04-03T16:19:46.277 回答