title: AJAX Image Upload - Invalid File Type
body: <p>I've been following an AJAX image file upload, which I had working but since modified massively to work with what I need. I'm uploading a compressed .jpg file, but its going straight to "Invalid File".</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;label class="control-label"&gt;Thumbnail Name Image Name&lt;/label&gt;
              &lt;input id="filenamedb" name="filenamedb" type="text" class="form-control" value="" disabled&gt;
              &lt;form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();"&gt;
                  &lt;label&gt;Select a File:&lt;/label&gt;&lt;br&gt;
                  &lt;input id="thefile" type="file" name="file" onchange="alertFilename()" required /&gt;&lt;br/&gt;
                  &lt;input type="submit" onclick="alertFilename()" value="Upload" /&gt;
              &lt;/form&gt;&lt;br/&gt;
              &lt;progress&gt;&lt;/progress&gt;
  </code></pre>
  
  <p>AJAX</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function alertFilename()
      {
          var thefile2 = document.getElementById('thefile');
          document.getElementById('filenamedb').value = thefile2.files[0].name;
      }
  
      function submitForm()
      {
          console.log("submit event");
          var fd = new FormData(document.getElementById("thefile"));
          $.ajax({
          xhr: function() {
              var myXhr = $.ajaxSettings.xhr();
              if(myXhr.upload){
                  myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
              }
              return myXhr;
          },
          url: "/upload.php",
          type: "POST",
          data: fd,
          processData: false,
          contentType: false          
          }).done(function( data ) {
              console.log("PHP Output:");
              console.log( data );
          });
          return false;
      }
  
      function progressHandlingFunction(e){
          if(e.lengthComputable){
              $('progress').attr({value:e.loaded,max:e.total});
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Upload.php</p>
  
  <pre><code>&lt;?php
  $allowedExts = array("gif", "jpeg", "jpg", "png");
  $temp = explode(".", $_FILES["file"]["name"]);
  $extension = end($temp);
  if ((($_FILES["file"]["type"] == "image/gif")
  || ($_FILES["file"]["type"] == "image/jpeg")
  || ($_FILES["file"]["type"] == "image/jpg")
  || ($_FILES["file"]["type"] == "image/pjpeg")
  || ($_FILES["file"]["type"] == "image/x-png")
  || ($_FILES["file"]["type"] == "image/png"))
  &amp;&amp; ($_FILES["file"]["size"] &lt; 200000)
  &amp;&amp; in_array($extension, $allowedExts)) {
      if ($_FILES["file"]["error"] &gt; 0) {
          echo "Return Code: " . $_FILES["file"]["error"] . "&lt;br&gt;";
      } else {
          $filename = $_FILES["file"]["name"];
          echo "Upload: " . $_FILES["file"]["name"] . "&lt;br&gt;";
          echo "Type: " . $_FILES["file"]["type"] . "&lt;br&gt;";
          echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB&lt;br&gt;";
          echo "Temp file: " . $_FILES["file"]["tmp_name"] . "&lt;br&gt;";
  
          if (file_exists("/images/feed/" . $filename)) {
              echo $filename . " already exists. ";
          } else {
              move_uploaded_file($_FILES["file"]["tmp_name"],
              "/images/feed/" . $filename);
              echo "Stored in: " . "/images/feed/" . $filename;
          }
      }
  } else {
      echo "Invalid file";
  }
  ?&gt;
  </code></pre>