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

Тема в разделе "JavaScript", создана пользователем verfaa, 2 июн 2014.

Модераторы: ZiX
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    375
    Симпатии:
    41
    Имеется форма:
    Код:
            
    <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
     
  2. metsys

    metsys

    Регистр.:
    27 апр 2014
    Сообщения:
    474
    Симпатии:
    457
    У вас много чего намешано. Вы по разному обращаетесь к функциям, где то $ а где то jQuery.
    Вот вам рабочий пример: http://ruseller.com/lessons.php?rub_id=29&id=370
     
    verfaa нравится это.
  3. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    375
    Симпатии:
    41
    Спасибо, и ещё возникла проблема с разбором 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

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

    metsys

    Регистр.:
    27 апр 2014
    Сообщения:
    474
    Симпатии:
    457
    verfaa нравится это.
  5. DevOrc

    DevOrc Создатель

    Регистр.:
    5 июн 2014
    Сообщения:
    31
    Симпатии:
    10
  6. xotox

    xotox Постоялец

    Регистр.:
    10 янв 2013
    Сообщения:
    51
    Симпатии:
    3
    если ты ждешь ответа в JSON, то лучше в настройка AJAX указать тип дпнных dataType указать JSON, тогда ничего преобразовывать не нужно будет и будет удобнее работать с ответом