Ajax Image Upload without Refreshing Page using Jquery

Ajax Image Upload without Refreshing Page using Jquery

Today, We want to share with you Ajax Image Upload without Refreshing Page using Jquery.In this post we will show you Upload an image without refreshing page in php, hear for PHP Image upload without refreshing page using jquery example we will give you demo and example for implement.In this post, we will learn about Image Upload Without Refreshing Page Using JQUERY, PHP & MYSQLi with an example.

Ajax Image Upload without Refreshing Page using Jquery

There are the Following The simple About Ajax Image Upload without Refreshing Page using Jquery Full Information With Example and source code.

  NodeJS RESTful API User Authentication with AngularJS using PHP MYSQL

As I will cover this Post with live Working example to develop Image Upload without Page Refresh with PHP and jQuery with Demo, so the PHP Image upload without refreshing page using jquery example is following below.

php image upload no refresh script

index.php

In this example Full source code for Image Upload Without Refreshing Page Using JQUERY, PHP & MYSQLi

<html lang="en">
<head>
<title>PHP - Image Uploading with Form JavaScript Example - pakainfo.com</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: '.img_previews'}).submit();
            });
        }); 
</script>
</head>
<body>
	<nav class="pakainfo navbar navbar-default">
		<div class="pakainfo container-fluid">
		<div class="pakainfo navbar-header">
		<a class="pakainfo navbar-brand" href="#">Free Source code For PHP - Image Uploading with Form JavaScript Example</a>
		</div>
		</div>
	</nav>
	<div class="pakainfo container">
	<form action="imageuploadpro.php" enctype="multipart/form-data" class="form-horizontal" method="post">
		<div class="img_previews"></div>
		<input type="file" name="image" class="pakainfo form-control" style="width:50%" />
		<button class="btn btn-success upload-image">Upload</button>
	</form>
	</div>
</body>
</html>

And then, now make a simple another PHP file for fetch php post http request as well as files or image uploading source code, Therefor make a PHP imageuploadpro.php file and put the simple bellow source code:

  Remove Special Characters from String using C#

imageuploadpro.php

here server side Source Code for image upload without refreshing page using jquery Example

<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root(username)');
define('DB_PASSWORD', 'My_password');
define('DB_DATABASE', 'pakainfo_database');
$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);
	$uploaded_img_name = time().".".$ext;
	$tmp = $_FILES['image']['tmp_name'];


	if(move_uploaded_file($tmp, 'upload/'.$uploaded_img_name)){
		mysqli_query($db,"INSERT INTO items (title)
		VALUES ('".$uploaded_img_name."')");
		echo "<img width='300px' src='upload/".$uploaded_img_name."' class='img_previews'>";
	}else{
		echo "Sorry !!, Your images uploading failed";
	}

}
?>

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Ajax Image Upload without Refreshing Page using Jquery.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

  PHP MySQL LIKE operator string Function

Leave a Reply

avatar
  Subscribe  
Notify of