title: jQuery / ajax upload image and save to folder
body: <p><strong>UPDATE CODE BELOW</strong></p>
  
  <p>I found some code that is able to upload an image and display its thumbnail. However, I would like to save the images to a particular folder as well. </p>
  
  <p>What jQuery code or ajax code can I use to save the original image to a folder of my choice?</p>
  
  <p>Here is the live demo: <a href="http://jsfiddle.net/dn9Sr/2/" rel="noreferrer">http://jsfiddle.net/dn9Sr/2/</a></p>
  
  <p>Here is the full code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  .input-file-row-1:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
  }
  
  .input-file-row-1{
      display: inline-block;
      margin-top: 25px;
      position: relative;
  }
  
  #preview_image {
    display: none;
    width: 90px;
    height: 90px;
    margin: 2px 0px 0px 5px;
    border-radius: 10px;
  }
  
  .upload-file-container { 
      position: relative; 
      width: 100px; 
      height: 137px; 
      overflow: hidden;   
      background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat;
      float: left;
      margin-left: 23px;
  } 
  
  .upload-file-container-text{
      font-family: Arial, sans-serif;
      font-size: 12px;
      color: #719d2b;
      line-height: 17px;
      text-align: center;
      display: block;
      position: absolute; 
      left: 0; 
      bottom: 0; 
      width: 100px; 
      height: 35px;
  }
  
  .upload-file-container-text &gt; span{
      border-bottom: 1px solid #719d2b;
      cursor: pointer;
  }
  
  .one_opacity_0 {
    opacity: 0;
    height: 0;
    width: 1px;
    float: left;
  }
  &lt;/style&gt;
  &lt;script&gt;
  $( document ).ready(function() {
  
     function readURL(input, target) {
          if (input.files &amp;&amp; input.files[0]) {
              var reader = new FileReader();
              var image_target = $(target);
              reader.onload = function (e) {
                  image_target.attr('src', e.target.result).show();
              };
              reader.readAsDataURL(input.files[0]);
           }
       }
  
      $("#patient_pic").live("change",function(){
          readURL(this, "#preview_image")
      });
  
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form name="" method="post" action="#" class="feedback-form-1"&gt;
      &lt;fieldset&gt;
          &lt;div class="input-file-row-1"&gt;
              &lt;div class="upload-file-container"&gt;
                  &lt;img id="preview_image" src="#" alt="" /&gt;
                  &lt;div class="upload-file-container-text"&gt;
                      &lt;div class = 'one_opacity_0'&gt;
                          &lt;input type="file" id="patient_pic" label = "add" /&gt;
                      &lt;/div&gt;
                      &lt;span&gt; Add Photo &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>UPDATE: I think I am on the right track. I am close but I don't know what data to send from the jQuery. I added a php scrit and its getting a call back as success but I am not sending the right var. I think if I just send the right val I can get it. 
  CODE:</p>
  
  <pre><code>&lt;script&gt;
  $( document ).ready(function() {
  
     function readURL(input, target) {
          if (input.files &amp;&amp; input.files[0]) {
              var reader = new FileReader();
              var image_target = $(target);
              reader.onload = function (e) {
                  image_target.attr('src', e.target.result).show();
  
  
                   $.ajax({
              type:'POST',
              url: 'theUpload.php',
              data: input.files[0],
              success:function(data){
                  console.log("success");
                  console.log(data);
                  alert(data);
              },
              error: function(data){
                  console.log("error");
                  console.log(data);
              }
          });
  
  
  
              };
              reader.readAsDataURL(input.files[0]);
  
  
  
  
  
  
  
  
           }
       }
  
      $("#patient_pic").live("change",function(){
          readURL(this, "#preview_image")
      });
  
  });
  &lt;/script&gt;
  </code></pre>