title: Issue with sending image over AJAX
body: <p>I created a on submit function that grabs different data along with images, if the user has uploaded them and ties the images into a <code>FormData</code> type object.  This is than sent along with other data to the server to upload.  My issue is that, I seem to be having trouble getting the images to the server along with other variables. All I get on <code>success</code> a blank response.</p>
  
  <p>Here is what I am doing:</p>
  
  <pre><code>ElevationColorsForm.prototype.submit = function()
  {
      // DEFUALT SET FORMDATA TO FALSE
      var formdata = false;
      // MAKE SURE BROWSER SUPPORTS FORM DATA
      if (window.FormData) {
          formdata = new FormData();
      }
      /************ DATA IS SENT TO SERVER TO BE STORED ON SAVE CHANGES *****************/
      var color_name = '';//&lt;!-- CONTAIN NAME OF COLOR SET IN INPUT FIELD
      var color_file = '';//&lt;!-- CONTAIN THE IMAGE TO BE UPLOADED // MOVED OVER TO THE formdata
      var color_type = [];//&lt;!-- EITHER new_color OR current_color
  
      color_name = $(".color-item-input").map(function() 
      {       
          return this.value 
  
      }).get().join(", ");
      color_file = $(".color-item-file").each(function()
      {
  
          if(this.files.length &gt; 0)
          {
              if (!!this.files[0].type.match(/image.*/)) {
  
                  var file =  this.files[0];
                  var reader;
  
                  if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.readAsDataURL(file);
                  }
                  if (formdata) {
                      formdata.append("images[]", file);
                  }
  
                  return file;    
              } 
              else
              {
                  formdata.append("images[]", 'none');
                  return 'false';
              }
          }
          else
          {
              formdata.append("images[]", 'none');
              return 'false'; 
          }
  
      }).get();
      $(".color-item").each(function()
      {           
          if($(this).hasClass('current-color'))
          {
              color_type.push('current-color');
          }
          else if($(this).hasClass('new_color'))
          {
              color_type.push('new-color');
          }
  
      });
      var RestrictionSelectActive = $(".restriction_active_ability option:selected").each(function()
      {           
          return this.value 
  
      }).get();
  
      var thisOne = this.Elevation.data.ifpe_id; // &lt;!-- ELEVATION ID
      $.ajax({
          url: "actions/save_elevation_colors.php",
          type: "post",
          data:
          {
              'formData' : formdata,
              'elevation_id' : thisOne
          },
          processData: false,
          contentType: false,
          success: function(data){
              console.log(data);
              $(".message_box").text("Changes made!");
              $(".message_box").fadeIn(); 
              setTimeout(function(){
                  $(".message_box").fadeOut();
                  $(".message_box").empty();  
              },2000);
          },
          error:function(){
              alert("failure");
          }
      });
  }
  </code></pre>
  
  <p>Here is my <code>data</code> response: <code>{"status":"ok","code":1,"original_request":[]}</code></p>
  
  <p>My server side is creating an array and storing all the the <code>$_POST</code> within the <code>original_request</code> and than <code>json_encoding</code> for retrieval.</p>
  
  <p>suggestions or thoughts?</p>