title: javascript formdata via ajax
body: <p>I am trying to upload a file via AJAX and PHP. I have a HTML form as below:</p>
  
  <pre><code>&lt;form method="post" id="sectiononeform" name="sectiononeform" enctype="multipart/form-data"&gt;
  
      &lt;div class="clearfix"&gt;
          &lt;input type="text" name="customHeading1" id="customHeading1" class="span10" value=""/&gt;
      &lt;/div&gt;
  
      &lt;!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded --&gt;
      &lt;div class="clearfix"&gt;
          &lt;textarea id="elm1" name="elm1" rows="15" class="xxlarge" cols="80" style="width: 80%"&gt;
  
          &lt;/textarea&gt;
      &lt;/div&gt;
  
      &lt;div class="clearfix"&gt;
          &lt;input type="file" name="file1" id="file1" class="span10" /&gt;
      &lt;/div&gt;
  
      &lt;div class="clearfix"&gt;        
          &lt;div class="actions"&gt;
              &lt;input type="submit" id="saveSection1" name="saveSection1" value="Submit" /&gt;
              &lt;input type="reset" name="resetSection1" value="Reset" /&gt;                
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>My jquery code is as follows:</p>
  
  <pre><code>$(document).ready(function(){
      $("#saveSection1").click(function(e){
          e.preventDefault();
  
          var formdata = false;
  
          /*function showUploadedItem (source) {
              var list = document.getElementById("image-list"),
                  li   = document.createElement("li"),
                  img  = document.createElement("img");
              img.src = source;
              li.appendChild(img);
              list.appendChild(li);
          }   */
  
          if (window.FormData) {
              formdata = new FormData();
  
              //document.getElementById("btn").style.display = "none";
          }
  
          var len = document.getElementById("file1").files.length, img, reader, file;
  
          for (var i = 0 ; i &lt; len; i++ ) {
              file = document.getElementById("file1").files[i];
              if (!!file.type.match(/image.*/)) {
                  if (window.FileReader ) {
                      reader = new FileReader();
                      /*reader.onloadend = function (e) { 
                          showUploadedItem(e.target.result, file.fileName);
                      };*/
                      reader.readAsDataURL(file);
                  }
                  if (formdata) {
                      alert("form data");
                      formdata.append("customHeading1", document.getElementById("customHeading1").value);
                      formdata.append("elm1", document.getElementById("elm1").value);
                      formdata.append("custsection1", 1);
                      formdata.append("venue_id", document.getElementById("venue_id").value);
                      formdata.append("images[]", file);
                      alert(formdata);
                  }
              }   
          } 
          var params = $("form#sectiononeform").serialize();
          //alert("params" + params);
          params = params + "&amp;custsection1=1&amp;venue_id=" + $("#venue_id").val() + "&amp;formdata=" + formdata;
          //alert(params);
          $.ajax({
            type: 'POST',
            url: 'saveCustomSectionData.php',
            data: formdata,
            success: function(data){
              alert(data);
            }
          });
      });
  });
  </code></pre>
  
  <p>My issue is that when I don't use the file input type, I can just serialize the form values and send it through AJAX. Since I am using file input type, I am using formdata and appending information to it. Is this the right way to send data. I am not getting any response back from php, neither can i see any request in firebug. Instead I get some vague error as "Illegal operation on WrappedNative prototype object". Any suggestions?</p>