File Upload on the server using PHP

  • Post author:
  • Post category:PHP
  • Post comments:0 Comments
  • Post last modified:October 5, 2020
  • Reading time:4 min(s) read

In this tutorial, we’ll learn, how File Upload on the server using PHP. In the previous tutorial, we learned how to insert data into the database using PHP. How to fetch/select data from a database using PHP and MySQL. how to update/edit data in a MySQL table using PHP. How to Delete data from MySQL table using PHP.

Now, it’s time to learn how to Upload files using PHP. Creating an HTML form to upload the file. Here is the Bootstrap4 Code.

<!DOCTYPE html>
<html>
<head>
<title>Data Insert  Into Database Using PHP</title>
<!-----------------------MaxCDN----------------------------->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="card">
<div class="card-header">
<h4>DATA INSERT INTO DATABSE USING PHP</h4>
</div>
<div class="card-body">
<form action="<?php $_PHP_SELF?>" method="post" enctype="multipart/form-data">
<div class="row">
<!------------IMAGE UPLOAD START----------->
<div class="col-md-12">
<div class="form-group">
<label>IMAGE UPLOAD <span style="color: red;">*</span></label>
<input type="file" name="imgs" class="form-control" required="">
</div>
</div>
<!------------------>
<div class="col-md-12">
<div class="text-center">
<input type="submit" name="submit" class="btn btn-primary">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
File Upload on the server using PHP

Here’s the complete code of image upload using PHP. It will store the Uploaded file in a “images” folder. NOTE:-

$fn=$_FILES[‘file’][‘name’]; –This is the name of actual file.

$fb=$_FILES[‘imgs’][‘tmp_name’];

The uploaded file in the temporary directory on the web server.

$fn=$_FILES['imgs']['name'];
$fb=$_FILES['imgs']['tmp_name'];
move_uploaded_file($fb, "image/".$fn);
Here Is the complete code File Upload on the server using PHP, MySQL, Bootstrap 4.
<?php
$connection=mysqli_connect("localhost","root","","php");
if ($connection) {
if (isset($_POST['submit'])) {
////////image upload start ////////////
$fn=$_FILES['imgs']['name'];
$fb=$_FILES['imgs']['tmp_name'];
move_uploaded_file($fb, "image/".$fn);

$sql="INSERT INTO test (fullname,email,phone,entry_date,image) VALUES('$fullname','$email','$phone','$date','$fn')";				
$done=$connection->query($sql);
if ($done) {
echo "DATA INSERT SUCCESSFULL";
}else{
echo "SOMETHING WENT WRONG";
}
}
}else{
echo "Connection Faild";
}
?>

<!DOCTYPE html>
<html>
<head>
<title>Data Insert  Into Database Using PHP</title>
<!-----------------------MaxCDN----------------------------->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="card">
<div class="card-header">
<h4>DATA INSERT INTO DATABSE USING PHP</h4>
</div>
<div class="card-body">
<form action="<?php $_PHP_SELF?>" method="post" enctype="multipart/form-data">
<div class="row">
<!------------IMAGE UPLOAD START----------->
<div class="col-md-12">
<div class="form-group">
<label>IMAGE UPLOAD <span style="color: red;">*</span></label>
<input type="file" name="imgs" class="form-control" required="">
</div>
</div>
<!------------------>
<div class="col-md-12">
<div class="text-center">
<input type="submit" name="submit" class="btn btn-primary">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

Leave a Reply