title: Uploading Image with Bio to PHP via AJAX jQuery
body: <p>I want to upload User images via AJAX to PHP Database. I tried multiple tutorials and other examples but nothing worked for my code. The codes work when used without AJAX but since I don't wish my users to see the upload page and stay on the same page that's why the thought of adding AJAX to the code. So have been trying this code for the past few hours but nothing worked in my favor. The files are not getting uploaded nor the data in the database is getting updated.</p>
  <p>file: test.php</p>
   
  <pre><code>&lt;script&gt; 
    function triggerClick(e) {   document.querySelector('#profileImage').click(); }
       function displayImage(e) {   if (e.files[0]) {
           var reader = new FileReader();
           reader.onload = function(e){
             document.querySelector('#profileDisplay').setAttribute('src', e.target.result);
           }
           reader.readAsDataURL(e.files[0]);   } }
           
                  $(document).on('click',&quot;#UploadImage&quot;, function(){
                       var fd = new FormData();
                   var profileImage = $('#profileImage')[0].files[0];
                   //fd.append('profileImage',profileImage);
                  var bio = document.getElementById( &quot;bio&quot; ).value;
  
                  $.ajax({
                              url:&quot;include/Upload.php&quot;,
                              method:&quot;POST&quot;,
                              data: fd,
                               contentType: false,
                               processData: false,
   
                                  success:function(data){
                                          alert(data);
                                      if(data == &quot;Login Successful&quot;) {
                                          }
                                      else {
                                          alert(data);
  
                                      }
                                  }
                      })       
  });  
  &lt;/script&gt;
  </code></pre>
  
  <pre><code>File : Upload .php
  
  &lt;?php
          session_start();
          include('connection.php');
          $msg = &quot;&quot;;
          $msg_class = &quot;&quot;;
          $Username = $_SESSION['Username'];
          //echo var_dump($Username);
      
          $conn = mysqli_connect(&quot;localhost&quot;, &quot;root&quot;, &quot;1234567890&quot;, &quot;test&quot;);
          $Status = stripslashes($_POST['bio']);
          echo var_dump($Status);
          $profileImageName = $Username. '-' . time() . '-' . $_FILES['profileImage']['name'];
          echo var_dump($profileImageName);
              
          $target_dir = &quot;../UserImages/&quot;;
          $target_file = $target_dir . basename($profileImageName);
       
    
  
       if($_FILES['profileImage']['size'] &gt; 200000) {
                $msg = &quot;Image size should not be greated than 200Kb&quot;;
                $msg_class = &quot;alert-danger&quot;;
              }
              // check if file exists
              if(file_exists($target_file)) {
                $msg = &quot;File already exists&quot;;
                $msg_class = &quot;alert-danger&quot;;
              }
              // Upload image only if no errors
              if (empty($error)) {
                if(move_uploaded_file($_FILES[&quot;profileImage&quot;][&quot;tmp_name&quot;], $target_file)) {
                  $sql = &quot;UPDATE users_login SET Image='$profileImageName', Status='$Status' WHERE Username='$Username'&quot;;
                    echo var_dump($sql);
                    //header(&quot;location: profiles.php&quot;)
                  if(mysqli_query($conn, $sql)){
                      session_start();
  
                  $query=&quot;select * from $dbtable WHERE Username = '&quot;.$Username.&quot;' &quot;;
                  echo $query;
                  $result2=@mysqli_query($connection,$query);
                  $row=mysqli_fetch_assoc($result2);
                  $_SESSION['ProfileImage']= $row['Image'];
                  print_r($_SESSION['ProfileImage']);
                  $_SESSION['Status']= $row['Status'];
      
                  $msg = &quot;Image uploaded and saved in the Database&quot;;
                $msg_class = &quot;alert-success&quot;;
              } else {
                $msg = &quot;There was an error in the database&quot;;
                $msg_class = &quot;alert-danger&quot;;
              }
            } else {
              $error = &quot;There was an error uploading the file&quot;;
              $msg = &quot;alert-danger&quot;;
            }
          }
  ?&gt;
  </code></pre>