jQuery Ajax File Upload images using PHP MySQLi

jQuery Ajax File Upload images using PHP MySQLi

Today, We want to share with you jQuery Ajax File Upload images using PHP MySQLi.
In this post we will show you Upload images using jQuery, Ajax and PHP Example, hear for Image Upload using AJAX in PHP/MySQLi we will give you demo and example for implement.
In this post, we will learn about Ajax File Upload with Form Data using PHP with an example.

PHP and AJAX is very simple to upload (store) an file or an image to (The client side to serverside)the web server via jQuery script and ajax() Script to without any refreshing browser the whole page, and once an image or files was uploaded (store to server) it will be the user viewed on the html same page.

There are Following steps are pointed under this process :

1. An Include jQuery script library.
2. HTML tag page with input tag file upload field.
3. file upload jQuery Ajax code using jquery.
4. move images PHP script to uploads image.

Read Also:  File upload size validation using Laravel 5.7

yourappname/—create a folder which folders upload images
yourappname/uploads

PHP with AJAX Example to Upload Image

yourappname/index.html
index.html file all the contains some (JS)JavaScript and HTML codes and external include js.

<html>
<head>
<title>Ajax Image Upload using PHP and jQuery : pakainfo.com</title>
<link href="yourscriptfolder/newstyles.css" rel="stylesheet" type="text/css" />
<img src="data:image/gif;" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>

<div class="bgColorbody">

<form id="fileuploadform" action="upload.php" method="post">

<div id="simpletargetLayer">No Image (empty)</div>


<div id="newfileuploaddataformLayer">
			<label>AJAX using Upload Image File click here:</label>
			<input name="userImage" type="file" class="newinputFile" />
			<input type="submit" value="Submit" class="newbtnSubmit" />
			</div>

			</form>

	</div>

</body>
</html>

yourappname/data/upload.php

if(is_array($_FILES)) //check array
{
	//upload file or images using ajax
	if(is_uploaded_file($_FILES['fileimgname']['tmp_name'])) 
	{
		$datasourcePathfile = $_FILES['fileimgname']['tmp_name'];
		$datatargetpathfile = "uploads/".$_FILES['fileimgname']['name'];
		if(move_uploaded_file($datasourcePathfile,$datatargetpathfile)) 
		{
		?>
			<img src="<?php echo $datatargetpathfile; ?>" alt="PHP with ajax script images upload" width="141px" height="141px" />
		<?php
		}
	}
}