'append' wird für ein Objekt aufgerufen, das die Schnittstelle FormData nicht implementiert

87

Ich versuche, ein Bild mit jquery und ajax hochzuladen. Aber hier ist etwas Seltsames passiert. In der Konsole Protokollieren Sie die Anzeige

TypeError: 'append' wird für ein Objekt aufgerufen, das die Schnittstelle FormData nicht implementiert.

Bitte sag mir, was ich hier falsch gemacht habe.

JS-Skript

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

Mein HTML-Markup 

 <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
quelle
Schauen Sie sich die erste verwandte Frage an: Wie sende ich FormData-Objekte mit Ajax-Anforderungen in jQuery? .
Felix Kling

Antworten:

184

Um Formdaten mit jquery zu verwenden, müssen Sie die richtigen Optionen festlegen

$.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 Referenz

processData (Standard: true)

Typ: Boolescher Wert

Standardmäßig werden Daten, die als Objekt an die Datenoption übergeben werden (technisch gesehen alles andere als eine Zeichenfolge), verarbeitet und in eine Abfragezeichenfolge umgewandelt, die dem Standardinhaltstyp "application / x-www-form-urlencoded" entspricht. . Wenn Sie ein DOMDocument oder andere nicht verarbeitete Daten senden möchten, setzen Sie diese Option auf false.

Patrick Evans
quelle
Ich habe eine Verwirrung. Würdest du mir bitte helfen? Angenommen, ich möchte eine Datei und einen String zusammen mit einem Array senden. Angenommen, ich möchte in meinem Skript die Bilddatei und eine Zeichenfolge mit dem Benutzernamen senden. wie geht das? Ist es möglich, einen JSON oder XML oder ein anderes Array zu erstellen, um Datei und Zeichenfolge zusammenzuhalten? Ich bin Anfänger. Vielleicht ist das die dumme Frage. Ich brauche deine Hilfe ..
1
Rufen Sie einfach die Append-Methode des FormData-Objekts auf, um Elemente hinzuzufügen, dh:postData.append("name",value);
Patrick Evans
Hinweis für komplexe Elemente wie Objekte, dh: {cat:"meow",dog:"bark"}Sie müssen zuerst JSON.stringify verwenden: postData.append("name",JSON.stringify(someObject));und den JSON auf der Serverseite analysieren
Patrick Evans
1
Vergiss nicht: cache: false Es gab mir gerade Probleme. Damit ist alles behoben.
Zri
Vielen Dank, ich habe mich in der letzten Stunde mit diesem Thema beschäftigt!
user752746
34

Fügen Sie diese beiden Parameter in Ihren AJAX ein, um Ihr Problem zu lösen:

processData: false,
contentType: false,
Sahriar rahman supto
quelle
Vergiss nicht: cache: falseEs gab mir gerade Probleme. Damit ist alles behoben.
Zri
@ Zri, was ist gemeint cache: false?
Fatih Mert Doğancan
Aus der jQuery-Dokumentation: Cache (Standard: true, false für Datentyp 'script' und 'jsonp') Typ: Boolean Wenn dieser Wert auf false gesetzt ist, werden angeforderte Seiten nicht vom Browser zwischengespeichert. Hinweis: Wenn Sie den Cache auf false setzen, funktioniert dies nur bei HEAD- und GET-Anforderungen. Es funktioniert, indem "_ = {Zeitstempel}" an die GET-Parameter angehängt wird. Der Parameter wird für andere Arten von Anforderungen nicht benötigt, außer in IE8, wenn ein POST an eine URL gesendet wird, die bereits von einem GET angefordert wurde.
Zri
1
@ Zri Möglicherweise verwenden Sie eine GETAnfrage. Das cache:falsefunktioniert auf POSTAnfrage nicht richtig . Wie Sie im obigen Kommentar erwähnt haben, funktioniert es nur für HEADund GETAnfragen. Und FormDatawird verwendet, um Formulardaten einzureichen, die ein POSTstatt sein sollten GET. Ich schlage daher vor, dass Sie POST immer zum Senden von Formulardaten verwenden.
Glücklicher
2

Sie müssen diesen Parameter im Ajax-Aufruf einstellen:

enctype: 'multipart/form-data'
Krupal Patel
quelle
2

Hinzufügen:

processData: false,
contentType: false,

wird definitiv bei der Datei helfen. Abgesehen davon, wenn Sie Fehler oder Erfolgsmeldungen an die Seite zurückgeben, sollten Sie json verwenden, um Ihr Leben einfacher zu machen.

Beispiel:

dataType: 'json',

Dies hilft beim Parsen Ihrer Antworten. Ohne es wird ein Fehler ausgegeben.

modnarrandom
quelle
0

Bearbeiten Sie einfach Ihre Zeile: 

var postData = new FormData(this);

zu:

var postData = new FormData($(this));
e sadeghi
quelle