image(profile picture) upload with html form by jquery and ajax only

image(profile picture) upload with html form by jquery and ajax only

i have html form and at the top of the html form i have profile picture feature so that user can upload his picture while filling the form

what i want is, if user upload his profile picture i want to temporary show that image inside profile picture div and dont save it into folder or database until user will fill the form completely and save if user will save the rest of the form with profile picture than this image should saved in upload folder and its path must be saved in databse.but if user cancel the form filling process than this profile picture must me removed form upload folder as well.

i wanted to do it with jquery and ajax only .



//till now i tried  

<!DOCTYPE html>

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("input:file").change(function (){

    var file = this.files[0];

var name = file.name;

    var size = file.size;

    var type = file.type;

    alert(file);   

    alert(name);   

    alert(size);   

    alert(type);  

    console.log(file);

    console.log($('file'));

     }); 

});

</script>

</head>

<body>



<input type="file" name="fa[]" id="f1"></input>

<div id="show_Image" name="show_image"></div>

</body>

</html>