'append' chiamato su un oggetto che non implementa l'interfaccia FormData

89

Sto cercando di caricare un'immagine con jquery e ajax. Ma qui è successa una cosa strana. Nella console Log la sua visualizzazione

TypeError: 'append' chiamato su un oggetto che non implementa l'interfaccia FormData.

Per favore dimmi cosa ho sbagliato qui?

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

Il mio markup 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

Guarda la prima domanda correlata: come inviare oggetti FormData con richieste Ajax in jQuery? .

— Felix Kling

187

per poter usare formdata con jquery devi impostare le opzioni corrette

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

Riferimento .ajax

processData (predefinito: true)

Tipo: booleano

Per impostazione predefinita, i dati passati all'opzione dati come oggetto (tecnicamente, qualsiasi cosa diversa da una stringa) verranno elaborati e trasformati in una stringa di query, adattandosi al tipo di contenuto predefinito "application / x-www-form-urlencoded" . Se desideri inviare un DOMDocument o altri dati non elaborati, imposta questa opzione su false.

— Patrick Evans
fonte

Ho una confusione. mi aiuterai per favore? supponiamo di voler inviare un file e una stringa insieme a un array. Supponiamo che nel mio script io voglia inviare il file immagine e una stringa con nome utente. come farlo? È possibile creare un json o xml o qualsiasi altro array per tenere insieme file e stringhe? Sono un principiante. potrebbe essere questa la domanda stupida. ho bisogno del tuo aiuto ..

1

basta chiamare il metodo append dell'oggetto FormData per aggiungere elementi, ad esempio:postData.append("name",value);

— Patrick Evans

Nota per elementi complessi come oggetti, ad esempio {cat:"meow",dog:"bark"}:, devi prima usare JSON.stringify: postData.append("name",JSON.stringify(someObject));e analizzare il json sul lato server

— Patrick Evans

1

Non dimenticare: cache: false mi ha dato problemi solo ora. Con tutto risolto.

— Zri

Grazie, sono rimasto bloccato su questo problema nell'ultima ora!

— user752746

34

Aggiungi questi due parametri nel tuo AJAX per risolvere il tuo problema:

processData: false,
contentType: false,

— Sahriar rahman supto
fonte

Non dimenticare: cache: falsemi ha dato problemi solo ora. Con tutto risolto.

— Zri

@Zri, cosa significa cache: false?

— Fatih Mert Doğancan

Dalla documentazione di jQuery: cache (default: true, false per dataType 'script' e 'jsonp') Tipo: Boolean Se impostato su false, forzerà le pagine richieste a non essere memorizzate nella cache dal browser. Nota: l'impostazione della cache su false funzionerà correttamente solo con le richieste HEAD e GET. Funziona aggiungendo "_ = {timestamp}" ai parametri GET. Il parametro non è necessario per altri tipi di richieste, tranne in IE8 quando viene effettuato un POST a un URL che è già stato richiesto da un GET.

— Zri

1

@Zri Forse stai usando una GETrichiesta. Il cache:falsenon funzionerà correttamente per POSTrichiesta. Come hai accennato nel commento sopra, funziona solo per HEADe GETrichieste. E FormDataviene utilizzato per inviare un modulo di dati che dovrebbe essere un POSTinvece di GET. Quindi ti suggerisco di utilizzare sempre POST per inviare i dati del modulo.

— Lucky

2

Devi impostare questo parametro nella chiamata ajax:

enctype: 'multipart/form-data'

— Krupal Patel
fonte

2

Aggiungendo:

processData: false,
contentType: false,

sarà sicuramente di aiuto con il file, a parte questo è che se stai facendo qualsiasi tipo di errore di passaggio o messaggi di successo alla pagina, vorrai usare json per semplificarti la vita.

esempio:

dataType: 'json',

questo ti aiuterà ad analizzare le tue risposte. Senza di esso, genererà un errore.

— modnarrandom
fonte

0

Basta modificare la tua riga:

var postData = new FormData(this);

per:

var postData = new FormData($(this));

— e sadeghi
fonte