Question

我的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;
    }.

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

Answer 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表单插件文件上传

1 个答案: