Загрузка нескольких фото через ajax

[verfaa]

Имеется форма:

<form action="/upload.php" method="post" enctype="multipart/form-data" id="old_upload_form">
            <p>Изображения:
                <input type="file" name="file[]" />
                <input type="file" name="file[]" />
                <input type="file" name="file[]" />
                <input type="submit" value="Отправить" />
            </p>
        </form>

Файлы, которые пользователь загружает в эту форму мне нужно отправить через ajax на php скрипт-обработчик.

$(document).ready(function(){

            $("#old_upload_form").bind("submit", function(e) {

                e.preventDefault();

                var data = new FormData($('#old_upload_form'));
                jQuery.each($('input[name^="file"]')[0].files, function(i, file) {
                    data.append(i, file);
                });

                $.ajax({
                    type: ppiFormMethod,
                    data: data,
                    url: ppiFormActionURL,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data){
                        alert(data);
                    }
                });

            });

        });

При попытке отправить эту форму в firefox firebug получаю ошибку:

TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.

Как переписать скрипт, чтобы все заработало?
Версия jquery на сайте 1.5.2

 

[metsys]

У вас много чего намешано. Вы по разному обращаетесь к функциям, где то $ а где то jQuery.
Вот вам рабочий пример: Для просмотра ссылки Войди или Зарегистрируйся

 

[verfaa]

Спасибо, и ещё возникла проблема с разбором json, который возвращает скрипт-обработчик.
В коде

                $.ajax({
                    type:'POST',
                    url: $(this).attr('action'),
                    data:formData,
                    cache:false,
                    contentType: false,
                    processData: false,
                    success:function(json){
                        console.log("success");
                        console.log(json);

                        var jsn = $.parseJSON(json);
                        for (var i = 0; i < jsn.length; i++) {
                            alert(jsn[i].thumbnail);
                        }
                    }
                });

скрипт обработчик возвращает данные вида:

[{"name":"20.jpg","size":57782,"type":"image\/jpeg","url":"\/uploades\/photos\/1\/1_bd78.jpg","thumbnail":"\/uploades\/photos\/1\/thumb_1_bd78.jpg","error":0},{"name":"17.jpg","size":44640,"type":"image\/jpeg","url":"\/uploades\/photos\/1\/1_cd7.jpg","thumbnail":"\/uploades\/photos\/1\/thumb_1_cd7.jpg","error":0},{"name":"34.jpg","size":40004,"type":"image\/jpeg","url":"\/uploades\/photos\/1\/1_6bce.jpg","thumbnail":"\/uploades\/photos\/1\/thumb_1_6bce.jpg","error":0}]

В функции success я пытаюсь их распарсить и пройтись в цикле:

var jsn = $.parseJSON(json);
                        for (var i = 0; i < jsn.length; i++) {
                            alert(jsn[i].thumbnail);
                        }

но получаю ошибку: TypeError: jsn is null

Как тут правильно цикл организовать?

 

[metsys]

Я думаю тебе стоит копать в эту сторону Для просмотра ссылки Войди или Зарегистрируйся

 

[DevOrc]

Есть хороший пример на Для просмотра ссылки Войди или Зарегистрируйся (2й пост)
Используя объекты FormData и FileReader

 

[xotox]

если ты ждешь ответа в JSON, то лучше в настройка AJAX указать тип дпнных dataType указать JSON, тогда ничего преобразовывать не нужно будет и будет удобнее работать с ответом