How to Upload file using PHP and Ajax beginner guide

Read this tutorial for how to Upload file using PHP and Ajax beginner guide. In this tutorial I will explain you how to upload file using Ajax without page refresh in PHP. First create a table with name tasks to save the image in the database. Now create a folder name PHP place the folder in localhost and create a file name index.php. Now create a a form to upload the file and to show the image create a image in the file. We need to add jQuery CDN on the top of your file and do some Ajax coding. Create a folder name upload inside the PHP folder where we will save the uploaded image.

Now copy and paste the below code in your index.php file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript">
function sendData()
{
 
    var data = new FormData($('#posting_comment')[0]);
 
 
     $.ajax({
               type:"POST",
               url:"insert.php",
               data:data,
               mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
               success:function(data)
              {
					//alert(data);
                      $(".image").html(data);
               }
       });
 
}
 
</script>
<div class="image">
 <img class="imageName" src="" height="200px" width="200px">
 </div><br>
<form name="posting_comment" id="posting_comment" >
 
 
      <input id="file_upload" name="attachment_file" class="file_upload_icon" type="file"/>
      <input type="button" class="post postbtn" style="border: none;outline:none;" value="Upload" onclick = "return sendData()"/>
 
 
</form>

Now run the URL http://localhost/php/  in your web-browser. Now your page will look like below

upload image using ajax and php

Now create a another file insert.php inside the PHP folder. We will do some code in this file to insert the file in database and in upload folder.

Copy and paste the below code in the file.

<?php
 
	$servername = "localhost";
	$username = "root";
	$password = "";
	$database = "hrm";
 
// Create connection
	$conn = new mysqli($servername, $username, $password, $database);
 
	if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
	} 
 
		$attachment_file=$_FILES["attachment_file"];
        $output_dir = "upload/";
        $fileName = $_FILES["attachment_file"]["name"];
		move_uploaded_file($_FILES["attachment_file"]["tmp_name"],$output_dir.$fileName);
		//echo "File uploaded successfully";
 
	$sql = "INSERT INTO tasks (name)
			VALUES ('".$fileName."')";
 
	if ($conn->query($sql) === TRUE)
	{
		echo $html = '<img class="imageName" src="http://localhost/php/upload/'.$fileName.'" height="200px" width="200px">';
 
	} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
	}
	$conn->close();
 
?>

Now refresh your web-browser and upload a file and click on the upload button. File name will be saved in the database and you will see the uploaded image in the page without page refresh. Check the upload folder you will see the image you have uploaded. Now your web-browser will look like below.

upload image with ajax and PHP

Hope this tutorial how to Upload file using PHP and Ajax beginner guide will help you.

Read this tutorial also:Insert data in database without refreshing page using Ajax and PHP beginner guide