jquery表单插件文件上传答案

【问题标题】：Jquery form plugin file uploadjquery表单插件文件上传
【发布时间】：2010-02-20 13:36:18
【问题描述】：

jquery 表单插件有问题。我尝试异步上传文件，但它没有提交表单。 html 标记和 javascript 代码如下所示

<form id="fileUploadForm" method="post" action="Default.aspx" enctype="multipart/form-data">
<input type="text" name="filename" />
<input type="file" id="postedFile" name="postedFile" />
<input type="button" value="Submit" onclick="UploadFile();" />
</form>

$(document).ready(function() {

        $('#fileUploadForm').ajaxForm();            
    });

function UploadFile() {

        var options =
        {                
            url:"Default.aspx",                
            beforeSend: ShowRequest,
            success: SubmitSuccesfull,
            error:AjaxError                               
        };            
        $("#fileUploadForm").ajaxSubmit(options);
        return false;
    }.

我有另一个测试表格，里面只有一个文本框，它工作正常。此外，当我评论 input type="file"... 行时，上面的表格也可以正常工作。输入类型文件有什么问题？有什么想法吗？

【问题讨论】：

标签： jquery forms file-upload plugins

【解决方案1】：

简而言之：

<input type="file" />

不能通过 ajax 提交，必须是完整的回发。如果你想要 AJAX 风格的行为，传统上你会为此使用 iFrame。我已经为此使用了一些解决方案，但不知道您在哪个平台上，SWFUpload 通常是一个不错的选择。

以下是修复的完整文档示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Javascript/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="Javascript/jquery.form.js"></script>
    <script type="text/javascript">
        $(function() {            
          $('#fileUploadForm').ajaxForm({                 
            beforeSubmit: ShowRequest,
            success: SubmitSuccesful,
            error: AjaxError                               
          });                                    
        });            

        function ShowRequest(formData, jqForm, options) {
          var queryString = $.param(formData);
          alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString);
          return true;
        }

        function AjaxError() {
          alert("An AJAX error occured.");
        }

        function SubmitSuccesful(responseText, statusText) {        
          alert("SuccesMethod:\n\n" + responseText);
        }    
    </script>
</head>
<body>
    <form id="fileUploadForm" method="POST" action="Default.aspx" enctype="multipart/form-data">
      <input type="text" name="filename" />
      <input type="file" id="postedFile" name="postedFile" />
      <input type="submit" value="Submit" />
    </form>
</body>
</html>

【讨论】：

感谢您的回复，您可以查看下面的链接jquery.malsup.com/form/#file-upload是我误解了吗？
@mehmet6parmak - 在上面添加了替代方案，试一试，看看你是否还有问题。您是否正在使用 FireBug 或其他工具来查看是否发生了任何操作/错误？
我没有使用 firebug，但我在 Visual Studio 中对其进行了调试，但是我无法理解 jquery 内部发生的事情（事实上，正如你上面提到的，它创建了一个 iframe，这是我唯一理解的东西 =)）。我尝试使用 jquery 的错误处理程序，但该方法从未执行。如果我发现问题我会写在这里再次感谢您的关注。
@mehmet6parmak - 如果您可以将其公开给我可以看到的 URL，我也很乐意看一看，如果可能的话，请发表评论。
这里clients.entegral.com.tr/test/jqueryfileupload.htm有两种形式-每行一种-。第二种形式效果很好。