title: how to upload an image with a text post AJAX, php, and html
body: <p>Hi i am trying to upload an image with comments added to it into a database using php ajax and html.</p>
  
  <p>here is the html part:</p>
  
  <pre><code>&lt;form name="form1" enctype="multipart/form-data" action=""&gt;
              &lt;h2&gt;&lt;/h2&gt;
              &lt;div class="form-group"&gt;
              &lt;textarea name="msg" class="form-control status-box" id="post" rows="3" cols="60" placeholder="What\'s on your mind?"&gt;&lt;/textarea&gt;
  
              &lt;p&gt;Upload an image.&lt;/p&gt;
              &lt;input type="file" id="postPhoto" name="postPhoto" value="upload" placeholder="Upload Image"&gt;
  
              &lt;/div&gt;
      &lt;/form&gt;
  
      &lt;div class="button-group pull-right"&gt;
          &lt;p class="counter"&gt;200&lt;/p&gt;
          &lt;a href="#" type="submit" onclick="submitChat()" class="post btn btn-primary"&gt;
              Post&lt;/a&gt;
      &lt;/div&gt;&lt;br&gt;&lt;br&gt;
  </code></pre>
  
  <p>this is what i have to the ajax which is on the same page as the html</p>
  
  <pre><code>&lt;script&gt;
  function submitChat() {
  var file = document.getElementById("postPhoto");
  var formData = new FormData();
  // alert(formData);
  formData.append("file[]", file.files[0]);
  
  if(form1.msg.value == '') {
      alert('You must Enter a Post');
      return;
  }
  
  
  
  var msg = form1.msg.value;
  var xmlhttp = new XMLHttpRequest();
  
  xmlhttp.onreadystatechange = function() {
      if(xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) {
          document.getElementById('logs').innerHTML = xmlhttp.responseText;
  
      console.log(xmlhttp.statusText);
      }
  }
  xmlhttp.open('POST', 'userposts.php?msg='+msg, true);
  xmlhttp.setRequestHeader("Content-type", "multipart/form-data");
  xmlhttp.send(formData);
  
  
  }
  &lt;script&gt;
  </code></pre>
  
  <p>and this is the php part:</p>
  
  <pre><code>$msg = stripslashes(htmlspecialchars($_REQUEST['msg']));
   if(isset($_FILES['postPhoto']['type'])) {
  $imageData = "";
  $validextensions = array("jpeg", "jpg", "png");
  $temporary = explode(".", $_FILES['postPhoto']['name']);
  $file_extension = end($temporary);
  
  if((($_FILES['postPhoto']['type'] === 'image/png') || ($_FILES['postPhoto']['type'] == 'image/jpg') || ($_FILES['postPhoto']['type'] == 'image/jpeg')) &amp;&amp; ($_FILES['postPhoto']['size'] &lt; 2500000) &amp;&amp; in_array($file_extension, $validextensions)) {
      if($FILES['postPhoto']['error'] &gt; 0) {
          echo "return code: " . $_FILES['postPhoto']['error'] . "&lt;br/&gt;&lt;br/&gt;";
      }
      else {
          $imageData = mysqli_real_escape_string($connection, file_get_contents($_FILES["postPhoto"]["tmp_name"]));
      }
  }
  }
  
  
  
  $stmt = "INSERT INTO posts VALUES ('', '$uname', '$msg', '$imageData')";
  $result = $connection-&gt;query($stmt);
  </code></pre>
  
  <p>the images do not seem to be getting sent to the php file idk how to go about fixing this. any help would be much appreciated.</p>