'ผนวก' เรียกบนวัตถุที่ไม่ใช้อินเทอร์เฟซ FormData

ฉันพยายามอัปโหลดภาพด้วย 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>

ในการใช้ 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 (ค่าเริ่มต้น: จริง)

ประเภท: บูลีน

ตามค่าเริ่มต้นข้อมูลที่ส่งผ่านไปยังตัวเลือกข้อมูลเป็นวัตถุ (ในทางเทคนิคสิ่งอื่นที่ไม่ใช่สตริง) จะถูกประมวลผลและแปลงเป็นสตริงการสืบค้นโดยปรับให้เหมาะสมกับประเภทเนื้อหาเริ่มต้น "application / x-www-form-urlencoded" . หากคุณต้องการส่ง DOMDocument หรือข้อมูลอื่น ๆ ที่ไม่ได้รับการประมวลผลให้ตั้งค่าตัวเลือกนี้เป็นเท็จ

เพิ่มพารามิเตอร์ทั้งสองนี้ใน AJAX ของคุณเพื่อแก้ปัญหาของคุณ:

processData: false,
contentType: false,

คุณต้องตั้งค่าพารามิเตอร์นี้ในการโทร ajax:

enctype: 'multipart/form-data'

การเพิ่ม:

processData: false,
contentType: false,

จะช่วยเรื่องไฟล์ได้อย่างแน่นอนนอกเหนือจากนั้นก็คือหากคุณส่งข้อผิดพลาดหรือข้อความความสำเร็จกลับไปที่หน้าคุณจะต้องใช้ json เพื่อทำให้ชีวิตของคุณง่ายขึ้น

ตัวอย่าง:

dataType: 'json',

ซึ่งจะช่วยในการแยกวิเคราะห์คำตอบของคุณ หากไม่มีมันจะทำให้เกิดข้อผิดพลาด

เพียงแก้ไขบรรทัดของคุณ:

var postData = new FormData(this);

ถึง:

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