Загрузка файла плагина формы Jquery - PullRequest
Новая
       15

Загрузка файла плагина формы Jquery

7 голосов
/ 20 февраля 2010

У меня проблема с плагином формы 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;
    }.

У меня есть другая тестовая форма, в которой есть только текстовое поле, и она отлично работает. Также, когда я комментирую строку ввода type = "file" ..., вышеприведенная форма тоже работает нормально. В чем проблема с типом входного файла? Любая идея?

1 Ответ

8 голосов
/ 20 февраля 2010

Короче говоря: 

<input type="file" />

Не может быть отправлено через ajax, это должен быть полный постбэк. Традиционно вы используете для этого iFrame, если хотите использовать стиль AJAX. Я использовал несколько решений для этого, не зная, на какой платформе вы работаете, 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>
...