PHP Image upload without refreshing page using jquery

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will show you how to image upload without any page reload by using jquery ajax. jquery ajax through we can upload any image and we can store the record into database in php. Here i am use jquery.form plugin for any image uploading. So we can do by using following few step of file uploading ajax jquery.

So at first we need to create index.php file as we do in following file, so need to create index.php file and then put bellow code.

index.php

<html lang="en">
<head>
<title>PHP - Image Uploading with Form JS 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> 
<script> 
        $(document).ready(function() { 
            $(".upload-image").click(function(){
            	$(".form-horizontal").ajaxForm({target: '.preview'}).submit();
            });
        }); 
</script>
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
		<div class="navbar-header">
		<a class="navbar-brand" href="#">PHP - Image Uploading with Form JS Example</a>
		</div>
		</div>
	</nav>
	<div class="container">
	<form action="imageuploadpro.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%" />
		<button class="btn btn-primary upload-image">Save</button>
	</form>
	</div>
</body>
</html>

Ok good , now need to create another file for as retrive php post request and image uploading code, so need to create imageuploadpro.php file and just put the bellow code:

imageuploadpro.php

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'root');
define('DB_DATABASE', 'learn');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);


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, 'upload/'.$image_name)){
		mysqli_query($db,"INSERT INTO items (title)
		VALUES ('".$image_name."')");
		echo "<img width='200px' src='upload/".$image_name."' class='preview'>";
	}else{
		echo "image uploading failed";
	}


}
?>

Read Also :Laravel Join with Subquery in Query Builder Example

Thanks for read. I hope it help you. For more you can follow us onĀ facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →