How to Upload Image in PHP with Example

18 Feb 2023 | PHP


In this tutorial, you will learn how to upload image in php with example. Image uploading is a primary requirement of every website or web application. I'll show you how to upload image in php with example.

In this example, we will create a form with file input to select the image and upload it to the "Images" directory, follow the simple steps below to upload the image in PHP.

You can upload image in php using move_uploaded_file() function.

This is the basic syntax of php move_uploaded_file() function.

move_uploaded_file($filename ,$destination)

Step 1.  Create HTML Form

First, we need to create an HTML form to select image.

Make sure to use attribute enctype="multipart/form-data" to form tag when you use any <input type="file"> element.

Index.php

<?php include "upload-image.php"; ?>
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>PHP Image Upload</title>

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
	</head>
	<body>

		<div class="container">
			<div class="row">

				<div class="col-md-12 mt-4 pt-4 mb-4">
					<h4 class="text-center">PHP Image Upload Example - buildwithphp.com</h4>
				</div>
		
				<div class="col-md-4"></div>

				<div class="col-md-4">
					<form class="mx-auto" method="post" enctype="multipart/form-data">
						<div class="form-row">
							<div class="form-group col-md-9">
								<input type="file" name="image" class="form-control" required>
							</div>
							<div class="form-group col-md-3">
								<button type="submit" name="submit" class="btn btn-success">Upload</button>
							</div>
						</div>
					</form>
				</div>

				<div class="col-md-4"></div>
		
			</div>
		</div>


		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script></body>
</html>

Step 2. Create PHP File to upload Image

In this step, we need to create a php file to upload image in “images” directory.

upload-image.php

<?php
if(isset($_POST['submit'])){

    // This is the directory where images will be saved
    $filename = basename( $_FILES['image']['name']);
	$target_dir = "images/";
	$target = $target_dir . $filename;

	$is_upload = move_uploaded_file($_FILES['image']['tmp_name'], $target);

	if ($is_upload) {

		echo '<script type="text/javascript">alert("The file has been uploaded successfully.");</script>';
		echo '<script type="text/javascript">window.location.href = window.location.href;</script>';

	}else{
		echo '<script type="text/javascript">alert("Sorry, there was a problem uploading your file.");</script>';
		echo '<script type="text/javascript">window.location.href = window.location.href;</script>';
	}
}
?>

Step 3: Folder Creation

In this step, we need to create a folder in the root directory of the project, so create a folder called "images" in the root directory.

Congratulations, Now the above code is ready to run.

Buddy! I hope you relished the tutorial, and it was good to see you again. Keep learning. Keep visiting.

Related Blogs