Ajax Image Upload using PHP and jQuery Example from scratch
In this post we will give you information about Ajax Image Upload using PHP and jQuery Example from scratch. Hear we will give you detail about Ajax Image Upload using PHP and jQuery Example from scratchAnd how to use it also give you demo for it if it is necessary.
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 >
<h2>PHP - Jquery Ajax Image uploading Example</h2>
<div >
<div >Ajax Image upload jquery php example</div>
<div >
<form action="imageUpload.php" enctype="multipart/form-data" method="post">
<div ></div>
<input type="file" name="image" style="width:30%" />
<br/>
<button >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…
Hope this code and post will helped you for implement Ajax Image Upload using PHP and jQuery Example from scratch. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs