title: Send Locally Stored Image to Server Via Ajax
body: <p>I have looked high and low for a straight forward answer to this question.</p>
  
  <p>I have an image loaded locally in a phone gap application in the following directory:</p>
  
  <pre><code>/image/test.png
  </code></pre>
  
  <p>I want to send this image to the server as part of a multi-part form using form data.</p>
  
  <pre><code>var formdata = new FormData();
  </code></pre>
  
  <p>I then append my JSON</p>
  
  <pre><code>formdata.append("json", JSON.stringify(request));
  </code></pre>
  
  <p>I then want to append the image and I tried using the following</p>
  
  <pre><code>var img = new Image();
  img.src = './image/test.png';
  
  formdata.append("file", img.src );
  
  $.ajax(
  {
    url : "http://myserver:8080/myservlet",
    type : "POST",
    data : formdata,
    processData : false,
    contentType : false,
    dataType : "json",
    success : function(response)
    {
      console.log("success response:"+JSON.stringify(response));
    },
    error : function(jqXHR,textStatus,errorThrown)
    {
      var msg = "Error Sending File. Status: "+textStatus+" Error:"+errorThrown;
      navigator.notification.alert(msg, null, "Error", "OK");
    }
  });
  </code></pre>
  
  <p>This if course is not working for me - what am I doing wrong.</p>