title: 'append' called on an object that does not implement interface FormData
body: <p>I'm Trying to upload image on with jquery and ajax. But weird thing happened here. In console Log its showing </p>
  
  <blockquote>
    <p>TypeError: 'append' called on an object that does not implement
    interface FormData.</p>
  </blockquote>
  
  <p>Please tell me what i did wrong here? </p>
  
  <p><strong>JS script</strong></p>
  
  <pre><code>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     
          }
      });
  });
  </code></pre>
  
  <p>My HTML Markup </p>
  
  <pre><code> &lt;div class="row"&gt;
      &lt;!-- left column --&gt;
      &lt;div id="pro_pix" class="col-md-4 col-sm-6 col-xs-12"&gt;
        &lt;div class="text-center"&gt;
          &lt;img src="template/image/725.GIF" class="avatar img-circle img-thumbnail" style="display:none" alt="avatar"&gt;
          &lt;img src="&lt;?php echo $rowuser['profile_logo']; ?&gt;" class="avatar img-circle img-thumbnail" alt="avatar"&gt;
          &lt;h6&gt;Upload a different photo...&lt;/h6&gt;
          &lt;form role="form" id="logoform" enctype="multipart/form-data"&gt;
          &lt;input id="logo" name="logo" type="file" class="text-center center-block well well-sm"&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>