Программная отправка формы при использовании AjaxForm - PullRequest
2 голосов
/ 25 марта 2010

Я хотел найти способ загрузить один файл * в фоновом режиме, чтобы он запускался автоматически после выбора файла и не требовал флэш-загрузки, поэтому я пытаюсь использовать два замечательных механизма (jQuery.Form и JQueryMultiFile) вместе.Мне не удалось, но я уверен, что это потому, что мне не хватает чего-то фундаментального.

Просто используя 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, как показано выше, допустим, я включил кнопку Submit вместе с плагином JQuery Formопределяется следующим образом ...

 var options = {
  success: respondToUpload
 }; 

 $('#photoForm').ajaxForm(options);

... это также отлично работает.При нажатии кнопки «Отправить» форма загружается в фоновом режиме.


Что я не знаю, как это сделать, так это заставить эти два работать вместе.Если я использую Javascript для отправки формы (как показано в примере с MultiFile выше), форма отправляется, но функция JQuery.Form не вызывается, поэтому форма не отправляется в фоновом режиме.

Я подумал, что, возможно, мне нужно изменить регистрацию формы следующим образом ...

$('#photoForm').submit(function() {
 $('#photoForm').ajaxForm(options);
});

... но это не решило проблему.То же самое верно, когда я попробовал .ajaxSubmit вместо .ajaxForm.

Чего мне не хватает?

  • Кстати: я знаю, что использование MultiFile для загрузки одного файла может показаться странным, но идея в том, что количество файлов будет динамическим в зависимости от учетной записи пользователя.Итак, я начинаю с одного, но число меняется в зависимости от условий.

1 Ответ

1 голос
/ 03 апреля 2010

Ответ оказывается смущающе простым.

Вместо программной отправки с использованием ...

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);
...