jQuery表单插件文件上传

Question

jQuery表单插件文件上传

7

我有一个关于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"这一行时，上面的表单也可以正常工作。那么input type file有什么问题呢？有任何想法吗？

- mehmet6parmak

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Craver · Accepted Answer

简而言之：

<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>