Code:
<div class="container">
<div id="preview"></div>
<form id="form" method="post" enctype="multipart/form-data">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Title</label>
<div class="col-md-9">
<input name="title" placeholder="Holiday" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Image1</label>
<div class="col-md-9">
<input type='file' name='image1' class='form-control'>
<img class="image1 img-thumbnail" style="display:none" alt="image1" width="100" height="100" /> </div>
</div>
</div>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Image2</label>
<div class="col-md-9">
<input type='file' name='image2' class='form-control'>
<img class="image2 img-thumbnail" style="display:none" alt="image2" width="100" height="100" /> </div>
</div>
</div>
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
</form>
<div id="err"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function save()
{
$.ajax
({
url: "ajax.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend : function()
{
$("#err").fadeOut();
},
success: function(data)
{
if(data=='invalid file')
{
$("#err").html("Invalid File !").fadeIn();
}
else
{
$("#preview").html(data).fadeIn();
$("#form")[0].reset();
}
},
error: function(e)
{
$("#err").html(e).fadeIn();
}
});
};
</script>