[
Показаны сообщения с ярлыком ajax. Показать все сообщения
Показаны сообщения с ярлыком ajax. Показать все сообщения

вторник, 19 июля 2011 г.

Upd: Ajax отправка формы с файлом на jQuery

Вчерашний пост по поводу отправки формы с файлом через AJAX не завелся с IE. Беглый взгляд в консоль разработчика показал, что IE отправляет форму не через POST, а через GET. Не долго думая решил попробовать 2ю версию работы с jQuery Form.

Итак, форма:

<form id="ajax_form" method="post" action="/path/to/form/processing/" enctype="multipart/form-data">
<input type="text" name="some_text" />
<input type="file" name="some_file" />
<input type="submit" value="Post" />
</form>

Форма как форма. Отправка будет происходить, как с обычной формой, по нажатию на кнопку Post, которая теперь обычный submit. Для того, чтобы обернуть ее в iframe, надо в $(document).ready() инициализировать ajaxForm:

$(document).ready(function(){
    
    $('#ajax_form').ajaxForm({
        success: function(data) {
            alert(data);
        }
    });
});

Программно отправить форму можно так: $('#ajax_form').submit().

Проблема решена, но осталось 2 вопроса из-за чего не работает первый вариант в IE:

  1. неправильно работает плагин?
  2. проблемы с IE и какие? (в других браузерах все на ура)
Если глючит код плагина - невелика беда. Если же дело в IE, то может быть кто-нибудь уже с этим сталкивался и осознал в чем тут дело?

понедельник, 18 июля 2011 г.

Ajax отправка формы с файлом на jQuery

Не все так хорошо, как казалось - данный код не работает в IE! К сожалению, своего IE у меня нет - обычно "отбираю" ноут у кого-нибудь из родственников, но я таки переписал код по-другому (и не раз), и форма заработала. Новый пост тут.

Ни для кого не секрет, что через AJAX (XMLHttpRequest) нельзя отправить форму с файлом... в том смысле в каком все привыкли это делать обычным POST'ом. Весьма распространенный ход в этом случае - создать iframe, в нем форму, и отправить ее.

Безусловно это не так сложно, как кажется на первый взгляд, однако, зачем изобретать велосипед? Погуглив вчера нашел весьма удобный в обращении плагин jQuery Form.

Допустим, вы создаете динамически (в оверлее) форму следующего содержания:

<form id="ajax_form" enctype="multipart/form-data" onsubmit="return false;">
<input type="text" name="some_text" /><br />
<input type="file" name="some_file" /><br />
<button onclick="ajaxPostForm()">Post</button>
</form>

и хотите, чтобы по нажатию на Post форма отправлялась через AJAX. Используя jQuery Form это можно сделать несколькими способами, я покажу наиболее близкий к $.post():

function ajaxPostForm() {
    // получим форму
    var form = $('#ajax_form');
    // обернем ее в IFrame - поступаем как при использовании практически любого jQuery плагина
    form.ajaxForm();
    // отправим форму - большинство параметров как у $.ajax()
    form.ajaxSubmit({
        url: '/path/to/form/processing/',
        success: function(data) {
            alert(data);
        }
    });
}

И some_text и some_file ушли на сервер. Ура!