Блог Толика Вострякова

Живой опыт программирования, Python, Django, современные языки и немного фотографий
Блог - новые записи и ссылки (Atom)

Загрузка файлов на сервер через AJAX -

По наивности попробовал загрузить файлы на сервер, используя JQuery-команду post:

$.post(url, $("#myForm").serialize());

HTML-код формы, скажем такой:

<form id="myForm">
  <input type="text" name="text"/>
  <input type="file" name="image"/>
</form>

Оказалось через AJAX так делать нельзя, если в форме есть файлы :) Как же тогда сделать? Одно из решений - плагин "forms" к jQuery. В коде страницы пишем следующее:

script type="text/javascript" src="/media/js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  // bind 'myForm' and provide a simple callback function 
  $('#myForm').ajaxForm();
 
  // submit form
  $("#myForm").ajaxSubmit(
            url: url,
        iframe: true,
        dataType: 'json',
        beforeSubmit: function(arr, $form, options) {
                // some code here
            },
            success: function(data) {
                // some code here
                        }
        });
})

, где параметр iframe: true рекомендую установить, если идет загрузка файлов. Параметр dataType: 'json' - задает тип возвращаемых данных.

Попробовал работу плагина в Firefox 3.6, Chrome 5 и Internet Explorer 8. Работает без проблем. И на последок описание API плагина.

Комментарии: 12

alerion - 04.09.2010 Плагин действительно хороший. И без "iframe: true", вроде как работает.
Толик Востряков - 04.09.2010 Не пробовал без iftame: true. Решил довериться рекомендации.
pashsha - 04.10.2011 Гуд, спасибо, пригодилось! Проверено, работает.
Толик Востряков - 04.10.2011 Отлично, что помогло!
George Mihailov - 13.12.2011 Есть опыт использования этой библиотеки. В целом работает хорошо. Однако при cross domain запросах работать не будет, придётся прикручивать cross frame messaging.
Evgeny - 28.01.2012 Отличная вещица в будущем думаю пригодится.
maxambek - 22.03.2012 Нифига не работает :(
Скопировал один к одному пример (добавил только в конце)
maxambek - 22.03.2012 Ёлки-палки - куда-то пропал закрывающий тэг скрипта в моём сообщении. Вобщем я его в примере добавил - всё равно не работает
Толик Востряков - 22.03.2012 Вместо url - естественно твой url. Плюс нужна конечно серверная часть к этому примеру. Потом смотреть - что доходит до сервера. На что ругается браузер при отправке.
maxambek - 22.03.2012 URL я свой написал, это понятно.
Серверная часть до безобразия простая:

def doajaxfileupload(request):
print u'вошли'
mimetype='text/javascript'
data=simplejson.dumps({'txt':u'Загрузили'})
print u'отработали'
return HttpResponse(data, mimetype)

Реакция браузера: при загрузке страницы в консоли выводятся строки:
вошли
отработали
На дальнейшее действие никакой реакции. Это в ФФ, а в ИЕ ответ сервера пытается сохранить в файл
maxambek - 22.03.2012 Кстати в примере нет кнопки отправки данных - я добавил
maxambek - 23.03.2012 разобрался - заработало. Получилось через ajaxForm, без использования ajaxSubmit

Добавить комментарий:


Буду использовать, только для связи с тобой

Чтобы и другие могли узнать о тебе

Вы можете использовать markdown разметку.

Например:
**жирный**
*курсив*
## Заголовок

Не используйте html-тэги. Все ссылки станут активными, все переводы строк будут заменены на <br>
captcha