A PHP script can be used with a HTML form to allow users to upload files to the server. Initially files are uploaded into a temporary directory and then relocated to a target destination by a PHP script.
This feature lets people upload both text and binary files. With PHP’s authentication and file manipulation functions, you have full control over who is allowed to upload and what is to be done with the file once it has been uploaded.
Today, I’m going to teach you about “Uploading File Without Refreshing Page” in PHP. I will create an iframe in the document using javascript.
With this, you can dynamically load and display an image without reloading the rest of the page which speeds up the process.
In this article, I’ll explain the basics of file upload in PHP. Firstly, we’ll go through the PHP configuration options that need to be in place for successful file uploads.
Following that, we’ll develop a real-world example of how to upload a file.
Uploading File Without Refreshing Page
Let’s begin:
1. Create a file and name it “php”. This page will appear in the first load.
[html]
<!-- extension bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<h1 align="center">Uploading image without loading</h1>
<!-- index.php could be any script server-side for receive uploads. -->
<div class="container">
<div class="row">
<form rol="form">
<div class="form-group">
<label>Upload an Image :</label>
<input type="file" name="photo" id ="photo" /> <br/>
<input type="button" value="upload" onClick="fileUpload(this.form,'upload.php','upload'); return false;" class="btn btn-primary " >
</div>
<!-- display the message -->
<div id="upload" class="col-md-6 col-md-offset-3"></div>
</form>
</div>
</div>
[/html]2. Create a javascript function for uploading an image without refreshing that page and put this under the html code.
[javascript]
function fileUpload(form, url_destination, msg_id) {
// Create an iframe...
var iframe = document.createElement("iframe");
//set the properties of an iframe.
form.submit();
}
[/javascript]3. Create a file and name it “php”.
[php]
<!-- extension bootstrap css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<?php
if (move_uploaded_file($tmp_name, $img_path . $img_name)) {
echo "<img src='img/" . $img_name . "' class='img-responsive' />";
} else {
echo "Uploading field.";
}
} else {
echo "<h1>Image file size is not valid.</h1>";
}
} else {
echo "<h1>Uploaded file is not an image.</h1>";
}
} else {
echo "<h1>Please select an image..!</h1>";
exit;
}
}
?>
[/php]Complete Sourcecode available here.
Frequently Asked Questions
How does PHP file upload work in this example?
Form with enctype=’multipart/form-data’, PHP move_uploaded_file() for filesystem storage. Validate via $_FILES[‘file’][‘type’] + filesize check. Track filename + path in MySQL. Display via standard or .
What PHP and MySQL versions does this project require?
Most projects in this batch run on PHP 7.4 to PHP 8.2 with MySQL 5.7+ or MariaDB 10+. A few older projects need PHP 5.6 (deprecated, use XAMPP 7.x). To run: install XAMPP / WAMP / Laragon, extract project to htdocs, import the included .sql file via phpMyAdmin, edit the connection file (usually config.php or db_connect.php) with your DB credentials, browse to the project URL in your browser.
How do I set up the database for this PHP project?
Open phpMyAdmin (http://localhost/phpmyadmin/ on XAMPP), create a new empty database with the name specified in the project’s config.php. Click the Import tab, choose the included .sql file, click Go. Then edit config.php (or includes/connection.php) with: ‘localhost’, your MySQL username (usually ‘root’), your MySQL password (usually blank for XAMPP), and the database name.
Can I use this PHP project for a BSIT capstone or thesis?
Yes, but extend it. A bare CRUD app is too narrow for full capstone scope. Add: user roles via session checks, reports/dashboards (Chart.js + AJAX), PDF exports (TCPDF library), email notifications (PHPMailer), real domain extension (analytics, audit log, multi-branch support). Pair with Chapter 1-5 documentation matching your panel’s rubric.
Why am I getting ‘connection error’ or ‘undefined function mysqli_connect’?
Three common PHP issues: (1) Connection error: Apache + MySQL services not running in XAMPP control panel, OR database name in config.php does not match what you created in phpMyAdmin. (2) ‘undefined function mysqli_connect’: MySQL extension not enabled, in php.ini uncomment extension=mysqli (then restart Apache). (3) ‘No such file or directory’: MySQL socket path wrong, use 127.0.0.1 instead of localhost in the connection string.
Where can I find more PHP projects with source code?
Browse the PHP Projects hub for the full library (300+ vanilla PHP systems). For modern PHP MVC alternatives see Laravel Projects (74 systems) or CodeIgniter Projects (32 systems). For BSIT-focused capstone idea lists see 150 Best Capstone Project Ideas.