title: Upload image and preview on div without refresh - PHP / AJAX
body: <p>I know how upload an image by a form in php. This is my php-code:</p>
  
  <pre><code>&lt;?php
  
      include('include/db.inc.php');
  
      if(!isset($_SESSION)) 
      { 
          session_start();
      }
  
      if(isset($_SESSION['username']))
      {
          $username = $_SESSION['username'];
          $valid_exts = array('jpeg', 'jpg', 'png', 'gif');
          $max_size = 200 * 1024; 
          $path = "../php/data/users/".$username."/"; 
  
              if ($_SERVER['REQUEST_METHOD'] === 'POST')
              {
                  if(!empty($_FILES['image']))
                  {
                      $ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
  
                          if(in_array($ext, $valid_exts) &amp;&amp; $_FILES['image']['size'] &lt; $max_size)
                          {
                              $path = $path . 'profile.jpg';
  
                              if (move_uploaded_file($_FILES['image']['tmp_name'], $path))
                              {
                                  $sql = 'UPDATE users SET img_src = "profile.jpg" WHERE username_crypt = "'.$username.'"';
                                  $result = mysql_query($sql) or die("Query error: ".mysql_error());
                                  echo("Success");
                              }
                          }
                          else
                          {
                              echo ("InvalidFile");
                          }
                  }
                  else
                  {
                      echo ("FileNotUploaded");
                  }
              }
              else
              {
                  echo ("BadRequest");
              }
      }
  
  ?&gt;
  </code></pre>
  
  <p>After the upload, I take the uploaded image by php and the upload works.
  But my question is: I have a div in HTML page where there's already an image selected by php. I would upload the new image and replace this without refresh of the page. I would upload the image and after the upload I would see the new image change the previous. I don't know how I could do that. I don't know how I can use AJAX in this context. I would obviously control the errors that php makes during the upload.</p>
  
  <p><strong>I would only click on a button that chooses the image, upload that image and then change the image div with the new uploaded picture without any refresh.</strong></p>
  
  <p>Thank you :D</p>