title: Jquery Post image with ajax
body: <p>I'm making a jquery mobile app which uploads an image. </p>
  
  <p>I used this code but without ajax you can't capture the echo from server(this one worked perfectly)</p>
  
  <pre><code>&lt;form action="http://tipsnow.altervista.org/upload.php" method="post" enctype="multipart/form-data"&gt;
              Title: &lt;input type="text" name="title" id="title" /&gt;
              Question Text: &lt;input type="text" name="text" id="text" /&gt;
              &lt;input type="hidden" id="idUtente" name="idUtente" value=""&gt;
              Select image to upload:
              &lt;input type="file" name="fileToUpload" id="fileToUpload"&gt;
              &lt;input type="submit" value="Upload Image" name="submit"&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>So I implemented the ajax post:</p>
  
  <p>html code:</p>
  
  <pre><code>&lt;form action=""&gt;
                      Title: &lt;input type="text" name="title" id="title" /&gt;
                      Question Text: &lt;input type="text" name="text" id="text" /&gt;
                      &lt;input type="hidden" id="idUtente" name="idUtente" value=""&gt;
                      Select image to upload:
                      &lt;input type="file" name="fileToUpload" id="fileToUpload"&gt;
                      &lt;input type="submit" value="Upload Image" name="submit"&gt;
                  &lt;/form&gt;
  </code></pre>
  
  <p>jquery code:</p>
  
  <pre><code>$(document).ready(function () {
  
              $('form').submit(function () {
                  var title = document.getElementById('title').value;
                  var idUtente = sessionStorage.getItem('autenticato').toString();
                  var text = document.getElementById('text').value;
                  var fileToUpload = document.getElementById('fileToUpload').files[0];
  
                  var formData = new FormData();
                  formData.append('title', title);
                  formData.append('text', text);
                  formData.append('idUtente', idUtente);
                  formData.append('fileToUpload', fileToUpload);
                  $.ajax({
                      url: 'http://tipsnow.altervista.org/upload.php',
                      data: formData,
                      type: 'post',
                      dataType: 'text',
                      contentType: false,
                      enctype: 'multipart/form-data',
                      processData: false,
                      success: function (data) {
                          alert(data);
                          return false;
                      }
                  })
              });
  </code></pre>
  
  <p>php code:</p>
  
  <pre><code>    &lt;?php
  $target_dir = "uploads/";
  $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
  $uploadOk = 1;
  $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
  // Check if image file is a actual image or fake image
  if(isset($_POST["submit"])) {
      $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
      if($check !== false) {
          echo "File is an image - " . $check["mime"] . ".";
          $uploadOk = 1;
      } else {
          echo "File is not an image.";
          $uploadOk = 0;
      }
  }
  // Check file size
  if ($_FILES["fileToUpload"]["size"] &gt; 500000) {
      echo "Sorry, your file is too large.";
      $uploadOk = 0;
  }
  // Allow certain file formats
  if($imageFileType != "jpg" &amp;&amp; $imageFileType != "png" &amp;&amp; $imageFileType != "jpeg"
  &amp;&amp; $imageFileType != "gif" ) {
      echo "Sorry, only JPG, JPEG, PNG &amp; GIF files are allowed.";
      $uploadOk = 0;
  }
  // Check if $uploadOk is set to 0 by an error
  if ($uploadOk == 0) {
      echo "Sorry, your file was not uploaded.";
  // if everything is ok, try to upload file
  } else {
      if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
          echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
      } else {
          echo "Sorry, there was an error uploading your file.";
      }
  }
  ?&gt;
  </code></pre>
  
  <p>But as soon as I press the submit button it takes me to the first page off the app without uploading anything, which I think means that the ajax wasn't successful but what's the problem?</p>
  
  <p>@edit noticed that I didn't append the submit button, did it but still doesn't work</p>
  
  <p>@@ edit : 28 seconds after submitting it goes into success but it doesn't upload the img neither get the echos back in response</p>
  
  <p>@@@edit:
  <a href="https://i.stack.imgur.com/kcyBT.png" rel="nofollow noreferrer">request</a></p>
  
  <p><a href="https://i.stack.imgur.com/vV9eN.png" rel="nofollow noreferrer">response</a></p>