'append' dipanggil pada objek yang tidak mengimplementasikan antarmuka FormData

89

Saya Mencoba mengunggah gambar dengan jquery dan ajax. Tapi hal aneh terjadi disini. Di konsol Log acaranya

TypeError: 'append' dipanggil pada objek yang tidak mengimplementasikan antarmuka FormData.

Tolong beritahu saya apa yang saya lakukan salah di sini?

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

Markup HTML saya 

 <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
sumber
Lihatlah pertanyaan terkait pertama: Bagaimana cara mengirim objek FormData dengan Ajax-request di jQuery? .
Felix Kling

Jawaban:

187

untuk menggunakan formdata dengan jquery Anda harus mengatur opsi yang benar

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

referensi .ajax

processData (default: true)

Jenis: Boolean

Secara default, data yang diteruskan ke opsi data sebagai objek (secara teknis, apa pun selain string) akan diproses dan diubah menjadi string kueri, sesuai dengan jenis konten default "application / x-www-form-urlencoded" . Jika Anda ingin mengirim DOMDocument, atau data tidak diproses lainnya, setel opsi ini ke false.

Patrick Evans
sumber
Saya bingung. maukah kamu membantu saya misalkan saya ingin mengirim file dan string bersama dengan array. Misalkan dalam skrip saya ingin mengirim file gambar dan string dengan nama pengguna. bagaimana cara melakukannya? Apakah mungkin untuk membuat json atau xml atau array lain untuk menyimpan file dan string bersama-sama? Saya pemula mungkin ini pertanyaan konyol. saya butuh bantuan Anda ..
1
panggil saja metode tambahkan objek FormData untuk menambahkan item, yaitu:postData.append("name",value);
Patrick Evans
Catatan untuk item kompleks seperti objek, yaitu {cat:"meow",dog:"bark"}:, Anda harus menggunakan JSON.stringify terlebih dahulu: postData.append("name",JSON.stringify(someObject));dan mengurai json di ujung server
Patrick Evans
1
Jangan lupa: cache: false Ini memberi saya masalah sekarang. Dengan semuanya sudah diperbaiki.
Zri
Terima kasih, saya telah terjebak dalam masalah ini selama satu jam terakhir!
pengguna752746
34

Tambahkan dua parameter ini di AJAX Anda untuk menyelesaikan masalah Anda:

processData: false,
contentType: false,
Sahriar rahman supto
sumber
Jangan lupa: cache: falseIni memberi saya masalah sekarang. Dengan semuanya sudah diperbaiki.
Zri
@Zri maksudnya apa cache: false?
Fatih Mert Doğancan
Dari dokumentasi jQuery: cache (default: true, false untuk dataType 'script' dan 'jsonp') Jenis: Boolean Jika disetel ke false, ini akan memaksa halaman yang diminta untuk tidak di-cache oleh browser. Catatan: Menyetel cache ke false hanya akan berfungsi dengan benar dengan permintaan HEAD dan GET. Ini berfungsi dengan menambahkan "_ = {timestamp}" ke parameter GET. Parameter ini tidak diperlukan untuk jenis permintaan lain, kecuali di IE8 saat POST dibuat ke URL yang telah diminta oleh GET.
Zri
1
@Zri Anda mungkin menggunakan GETpermintaan. Tidak cache:falseakan berfungsi dengan baik untuk POSTpermintaan. Seperti yang Anda sebutkan dalam komentar di atas, ini hanya berfungsi untuk HEADdan GETpermintaan. Dan FormDatadigunakan untuk mengirimkan formulir data yang seharusnya menjadi POSTbukan GET. Jadi saya sarankan Anda selalu menggunakan POST untuk mengirimkan data formulir.
Beruntung
2

Anda harus mengatur parameter ini di panggilan ajax:

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

Menambahkan:

processData: false,
contentType: false,

pasti akan membantu dengan file tersebut, selain itu adalah jika Anda melakukan segala jenis kesalahan lewat atau pesan sukses kembali ke halaman, Anda akan ingin menggunakan json untuk membuat hidup Anda lebih mudah.

contoh:

dataType: 'json',

ini akan membantu mengurai tanggapan Anda. Tanpa itu, itu akan membuat kesalahan.

modnarrandom
sumber
0

Cukup edit baris Anda: 

var postData = new FormData(this);

untuk:

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