'append' вызывается для объекта, который не реализует интерфейс FormData

87

Я пытаюсь загрузить изображение с помощью jquery и ajax. Но здесь произошла странная вещь. В журнале консоли его отображение

TypeError: 'append' вызывается для объекта, который не реализует интерфейс FormData.

Скажите, пожалуйста, что я здесь сделал не так?

JS скрипт

var prosrc=$("#pro_pix img").last().attr("src");
$("#logoform").on('change',function(event){
var postData = new FormData(this);
$("#pro_pix img").last().hide();
$("#pro_pix img").first().show();
event.preventDefault();
$.ajax(
    {
        url : "/function/pro_pic_upload.php",
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR)
        {
        $("#pro_pix img").last().show();
        $("#pro_pix img").first().hide();
        $("#pro_pix h6").text(data);
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            //if fails     
        }
    });
});

Моя разметка HTML 

 <div class="row">
    <!-- left column -->
    <div id="pro_pix" class="col-md-4 col-sm-6 col-xs-12">
      <div class="text-center">
        <img src="template/image/725.GIF" class="avatar img-circle img-thumbnail" style="display:none" alt="avatar">
        <img src="<?php echo $rowuser['profile_logo']; ?>" class="avatar img-circle img-thumbnail" alt="avatar">
        <h6>Upload a different photo...</h6>
        <form role="form" id="logoform" enctype="multipart/form-data">
        <input id="logo" name="logo" type="file" class="text-center center-block well well-sm">
        </form>
      </div>
    </div>
javascript jquery ajax
источник
Посмотрите на первый связанный вопрос: как отправлять объекты FormData с Ajax-запросами в jQuery? .
Феликс Клинг,

Ответы:

184

чтобы использовать formdata с jquery, вы должны установить правильные параметры

$.ajax({
    url : "/function/pro_pic_upload.php",
    type: "POST",
    data : postData,
    processData: false,
    contentType: false,
    success:function(data, textStatus, jqXHR){
        $("#pro_pix img").last().show();
        $("#pro_pix img").first().hide();
        $("#pro_pix h6").text(data);
    },
    error: function(jqXHR, textStatus, errorThrown){
        //if fails     
    }
});

Ссылка .ajax

processData (по умолчанию: true)

Тип: логический

По умолчанию данные, переданные в параметр данных в виде объекта (технически, что угодно, кроме строки), будут обработаны и преобразованы в строку запроса, соответствующую типу содержимого по умолчанию «application / x-www-form-urlencoded» . Если вы хотите отправить DOMDocument или другие необработанные данные, установите для этого параметра значение false.

Патрик Эванс
источник
Я в замешательстве. не могли бы вы мне помочь? Предположим, я хочу отправить файл и строку вместе с массивом. Предположим, в моем сценарии я хочу отправить файл изображения и строку с именем пользователя. как это сделать? Можно ли создать json, xml или любой другой массив для хранения файла и строки вместе? Я новичок. может быть это глупый вопрос. мне нужна твоя помощь ..
1
просто вызовите метод append объекта FormData для добавления элементов, например:postData.append("name",value);
Патрик Эванс,
Примечание для сложных элементов, таких как объекты, то есть: {cat:"meow",dog:"bark"}сначала вы должны использовать JSON.stringify: postData.append("name",JSON.stringify(someObject));и проанализировать json на стороне сервера
Патрик Эванс,
1
Не забывай: cache: false это только что доставило мне проблемы. С этим все исправлено.
Zri
Спасибо, я зациклился на этом вопросе последний час!
user752746
34

Добавьте эти два параметра в свой AJAX, чтобы решить вашу проблему:

processData: false,
contentType: false,
Сахриар Рахман супто
источник
Не забывай: cache: falseэто только что доставило мне проблемы. С этим все исправлено.
Zri
@Zri, что это значит cache: false?
Fatih Mert Doancan
Из документации jQuery: cache (по умолчанию: true, false для dataType 'script' и 'jsonp') Тип: Boolean Если установлено значение false, браузер не кэширует запрошенные страницы. Примечание. Установка для кеша значения false будет правильно работать только с запросами HEAD и GET. Он работает путем добавления "_ = {timestamp}" к параметрам GET. Параметр не требуется для других типов запросов, за исключением IE8, когда POST выполняется для URL-адреса, который уже был запрошен GET.
Zri
1
@Zri Возможно, вы используете GETзапрос. cache:falseНе будет работать должным образом для POSTзапроса. Как указано выше в комментариях, это работает только для HEADи GETзапросов. И FormDataиспользуется для отправки данных формы, которые должны быть POSTвместо GET. Поэтому я предлагаю вам всегда использовать POST для отправки данных формы.
Lucky
2

Вы должны установить этот параметр в вызове ajax:

enctype: 'multipart/form-data'
Крупал Патель
источник
2

Добавление:

processData: false,
contentType: false,

определенно поможет с файлом, кроме того, если вы делаете какие-либо ошибки или сообщения об успешном завершении на странице, вы захотите использовать json, чтобы облегчить себе жизнь.

пример:

dataType: 'json',

это поможет разобрать ваши ответы. Без этого выдаст ошибку.

случайный
источник
0

Просто отредактируйте свою строку: 

var postData = new FormData(this);

кому:

var postData = new FormData($(this));
e sadeghi
источник