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.

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
		}
	}
}


Related FAQ

Here are some more FAQ related to this Article:

  1.   Laravel 6 select distinct and order by Example
  2.   Ajax Image Upload without Refreshing Page using Jquery
  3.   PHP and Ajax Asynchronous File Upload using jQuery
  4.   Simple Ajax Upload image using jQuery PHP
  5.   Laravel Insert Update Delete Multiple checkbox value Example
  6.   jquery multiple Image Upload with preview and Delete using PHP
  7.   PHP Jquery Ajax Upload Multiple Images with Preview
  8.   Laravel 6 Get Route Parameters In Controller
  9.   Ajax Image Upload using PHP and jQuery
  10.   How to create custom PHP page-Template using WordPress