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

Живой опыт программирования, Python, Django, современные языки и немного фотографий

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

По наивности попробовал загрузить файлы на сервер, используя 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 плагина.

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