Upload image and preview on div without refresh - PHP / AJAX - php

Question

I know how upload an image by a form in php. This is my php-code:
<?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) && $_FILES['image']['size'] < $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");
}
}
?>
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.
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.
Thank you :D

Answer 1

You could take a look at jQuery File Upload: http://blueimp.github.io/jQuery-File-Upload/

Answer 2

Indeed, you need to use AJAX.
You can use this code below:
<script>
$.ajax({
type: "POST",
url: "YOUR-PHP-URL",
data: YOUR-DATA,
success: function(data){
$('YOUR-DIV').HTML(HERE-YOUR-NEW-IMAGE);
},
error: function(data){
Do-SOMETHING-IF-YOU-WANT
}
})
</script>
Your PHP looks oke, after succes you need to echo the path of the image. The 'data' var in success would be the path that you echo'd you now only need to replace the old image using jQuery. I'm not sure if you can do that only with .HTML() but i think this would work.