„append” wywołane na obiekcie, który nie implementuje interfejsu FormData

87

Próbuję przesłać obraz za pomocą jQuery i Ajax. Ale tutaj wydarzyła się dziwna rzecz. W konsoli zarejestruj jego wyświetlanie

TypeError: „append” wywołane na obiekcie, który nie implementuje interfejsu FormData.

Proszę, powiedz mi, co tu zrobiłem źle?

Skrypt 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     
        }
    });
});

Moje znaczniki 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
źródło
Spójrz na pierwsze powiązane pytanie: Jak wysyłać obiekty FormData z żądaniami Ajax w jQuery? .
Felix Kling

Odpowiedzi:

184

aby używać formdata z jquery musisz ustawić odpowiednie opcje

$.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     
    }
});

odniesienie .ajax

processData (domyślnie: true)

Typ: Boolean

Domyślnie dane przekazane do opcji danych jako obiekt (technicznie rzecz biorąc, wszystko inne niż ciąg znaków) zostaną przetworzone i przekształcone w ciąg zapytania, dopasowany do domyślnego typu zawartości „application / x-www-form-urlencoded” . Jeśli chcesz wysłać DOMDocument lub inne nieprzetworzone dane, ustaw tę opcję na false.

Patrick Evans
źródło
Mam zamieszanie. czy możesz mi pomóc? przypuśćmy, że chcę wysłać plik i ciąg wraz z tablicą. Załóżmy, że w moim skrypcie chcę wysłać plik obrazu i ciąg znaków z nazwą użytkownika. jak to zrobić? Czy można utworzyć json lub xml lub inną tablicę do przechowywania pliku i ciągu razem? Jestem początkującym. może to jest głupie pytanie. Potrzebuję twojej pomocy ..
1
po prostu wywołaj metodę append obiektu FormData, aby dodać elementy, tj .:postData.append("name",value);
Patrick Evans,
Uwaga dotycząca złożonych elementów, takich jak obiekty, tj .: {cat:"meow",dog:"bark"}najpierw musisz użyć JSON.stringify: postData.append("name",JSON.stringify(someObject));i przeanalizować json po stronie serwera
Patrick Evans,
1
Nie zapomnij: przed cache: false chwilą sprawiło mi to problemy. Po naprawieniu tego wszystkiego.
Zri
Dziękuję, utknąłem w tej sprawie przez ostatnią godzinę!
user752746
34

Dodaj te dwa parametry do swojego AJAX, aby rozwiązać problem:

processData: false,
contentType: false,
Sahriar rahman supto
źródło
Nie zapomnij: przed cache: falsechwilą sprawiło mi to problemy. Po naprawieniu tego wszystkiego.
Zri
@Zri, co to znaczy cache: false?
Fatih Mert Doğancan
Z dokumentacji jQuery: cache (domyślnie: true, false dla dataType 'script' i 'jsonp') Type: Boolean Jeśli ustawione na false, spowoduje to, że żądane strony nie będą buforowane przez przeglądarkę. Uwaga: ustawienie pamięci podręcznej na wartość false będzie działać poprawnie tylko z żądaniami HEAD i GET. Działa poprzez dołączenie „_ = {timestamp}” do parametrów GET. Parametr nie jest potrzebny dla innych typów żądań, z wyjątkiem IE8, gdy POST jest wykonywany do adresu URL, który został już zażądany przez GET.
Zri
1
@Zri Być może używasz GETżądania. Nie cache:falsebędzie działać poprawnie na POSTżądanie. Jak wspomniałeś w powyższym komentarzu, działa tylko dla żądań HEADi GET. I FormDatasłuży do przesłania danych formularza, które powinny być a POSTzamiast GET. Dlatego radzę zawsze używać POST do przesyłania danych z formularza.
Lucky
2

Musisz ustawić ten parametr w wywołaniu Ajax:

enctype: 'multipart/form-data'
Krupal Patel
źródło
2

Dodanie:

processData: false,
contentType: false,

na pewno pomoże z plikiem, poza tym, jeśli wykonujesz jakiekolwiek przekazywanie błędów lub komunikatów o sukcesie z powrotem na stronę, będziesz chciał użyć json, aby ułatwić sobie życie.

przykład:

dataType: 'json',

pomoże to w analizie Twoich odpowiedzi. Bez tego wyrzuci błąd.

modnarrandom
źródło
0

Po prostu edytuj swoją linię: 

var postData = new FormData(this);

do:

var postData = new FormData($(this));
e sadeghi
źródło