PHP JQuery Ajax Image Upload Example Tutorial
Today i am going to share with you how to make simple jquery ajax image upload with bootstrap example in PHP project.
We generally require to make image upload function on our web application project. If you use only core php, then you can make simply image upload by page refresh. But if you want to make using jquery ajax, it best idea. Using jquery ajax image upload looks good and it can done without page refresh. In ths post i am going to share with you how to create image uploading using jquery very easy way.
In this example we will use jquery.form.js plugin for ajax image upload. jquery.form.js provide very easy and simple way to fire ajax as like you work with code php. So you can make just follow three step and get basic example of ajax image upload. After complete this example, you will find preview as like bellow:
Preview:
Step 1: Create index.php file
In first step, we have to create index.php file. in this file we use bootstrap, jquery and form jquery. So let's create index.php file on your root directory and put bellow code:
index.php
<!DOCTYPE html>
<html>
<head>
<title>Upload image using ajax in php example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
</head>
<body>
<div class="container">
<h2>PHP - Jquery Ajax Image uploading Example</h2>
<div class="panel panel-primary">
<div class="panel-heading">Ajax Image upload jquery php example</div>
<div class="panel-body">
<form action="imageUpload.php" enctype="multipart/form-data" class="form-horizontal" method="post">
<div class="preview"></div>
<input type="file" name="image" class="form-control" style="width:30%" />
<br/>
<button class="btn btn-success upload-image">Image Upload</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".upload-image").click(function(){
$(".form-horizontal").ajaxForm({target: '.preview'}).submit();
});
});
</script>
</body>
</html>
Step 2: Create imageUpload.php file
In second step, we need to create imageUpload.php file, in this file we write code for image upload of code php. So, let's create imageUpload.php file on your root directory and put bellow code:
imageUpload.php
<?php
if(isset($_POST) && !empty($_FILES['image']['name'])){
$name = $_FILES['image']['name'];
list($txt, $ext) = explode(".", $name);
$image_name = time().".".$ext;
$tmp = $_FILES['image']['tmp_name'];
if(move_uploaded_file($tmp, 'uploads/'.$image_name)){
echo "<img width='300px' src='uploads/".$image_name."' class='preview'>";
}else{
echo "image uploading failed";
}
}else{
echo "Please select image";
}
?>
Step 3: Create uploads folder
In last step, we need to create "uploads" directory to store image. So let's create "uploads" folder on your root directory.
Ok, now we are ready to run our example. So let's run bellow command on your root directory for quick run:
php -S localhost:8000
Now you can open bellow URL on your browser:
http://localhost:8000/
I hope it can help you...
