'परिशिष्ट' ने एक ऐसे ऑब्जेक्ट पर कॉल किया जो इंटरफ़ेस फॉर्मडेटा को लागू नहीं करता है

Question 1

मैं jquery और ajax के साथ छवि अपलोड करने का प्रयास कर रहा हूं। लेकिन यहाँ अजीब बात हुई। कंसोल में अपना दिखा लॉग करें

TypeError: 'परिशिष्ट' एक ऐसे ऑब्जेक्ट पर कॉल करता है जो इंटरफ़ेस फॉर्मडैट को लागू नहीं करता है।

कृपया बताएं कि मैंने यहां क्या गलत किया?

जेएस लिपि

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>

Question 2

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

.जैक्स संदर्भ

प्रक्रियाडेटा (डिफ़ॉल्ट: सत्य)

प्रकार: बूलियन

डिफ़ॉल्ट रूप से, डेटा विकल्प को ऑब्जेक्ट के रूप में पास किया जाता है (तकनीकी रूप से, स्ट्रिंग के अलावा कुछ भी) संसाधित किया जाएगा और एक क्वेरी स्ट्रिंग में बदल जाएगा, डिफ़ॉल्ट सामग्री-प्रकार "एप्लिकेशन / x-www-form-urlencoded" के लिए फिटिंग । यदि आप एक DOMDocument, या अन्य गैर-संसाधित डेटा भेजना चाहते हैं, तो इस विकल्प को गलत पर सेट करें।

Question 3

अपनी समस्या को हल करने के लिए अपने AJAX में इन दो मापदंडों को जोड़ें:

processData: false,
contentType: false,

Question 4

आपको इस पैरामीटर को अजाक्स कॉल में सेट करना होगा:

enctype: 'multipart/form-data'

Question 5

जोड़ना:

processData: false,
contentType: false,

निश्चित रूप से फ़ाइल के साथ मदद करेगा, एक तरफ यह है कि यदि आप किसी भी प्रकार की त्रुटि या सफलता संदेश पृष्ठ पर वापस कर रहे हैं, तो आप अपने जीवन को आसान बनाने के लिए json का उपयोग करना चाहेंगे।

उदाहरण:

dataType: 'json',

यह आपकी प्रतिक्रियाओं को पार्स करने में मदद करेगा। इसके बिना, यह एक त्रुटि फेंक देगा।

Question 6

बस अपनी पंक्ति संपादित करें:

var postData = new FormData(this);

सेवा:

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