Uploading File Without Refreshing Page in PHP

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.

Technology stack and requirements

To run this PHP project, you need these tools on your development machine:

• XAMPP or WAMP server. Bundles Apache, MySQL, and PHP so you can run PHP on Windows without individual installs. Free from apachefriends.org.
• PHP 8.0 or higher. Included with XAMPP. Older versions (5.x, 7.x) may work but modern PHP features improve security and performance.
• MySQL or MariaDB. Comes with XAMPP. phpMyAdmin manages the database through a browser UI.
• VS Code or PhpStorm. Free code editor with PHP syntax highlighting, IntelliSense, and debugging support.
• Web browser. Chrome, Firefox, or Edge for testing the running app.

Installing the source code

1. Download the archive. Get the ZIP file from the download link on this page and extract it.
2. Move to htdocs. Place the extracted folder inside C:\xampp\htdocs\ so Apache can serve it.
3. Import the database. Open http://localhost/phpmyadmin, click Import, and select the .sql file included in the archive.
4. Update database credentials. Open the config.php or connection.php file and set the correct database name, username, and password (default XAMPP: root / empty password).
5. Run the project. Start Apache + MySQL in XAMPP, then visit http://localhost/your-project-folder/ in a browser.

Using this project for your BSIT capstone

This PHP project maps cleanly to standard BSIT capstone documentation. Suggested chapter alignment:

• Chapter 1 (Introduction). Discuss the problem the system solves in real-world context. Cite Philippine business or academic use cases where a manual process could be replaced.
• Chapter 2 (Review of Related Literature). Compare this system’s features against 5-10 similar published projects. Cite journals like IJERT or IEEE Access for academic-standard sources.
• Chapter 3 (Methodology). Include Use Case Diagram, Data Flow Diagram, Entity Relationship Diagram, and Activity Diagram covering all major workflows.
• Chapter 4 (Results and Discussion). Screenshot each module of the running system with a caption explaining what data it processes and which user role interacts with it.
• Chapter 5 (Conclusion and Recommendations). Identify features that could be added in a Version 2, such as mobile app, REST API export, or AI-powered analytics.

Modules typical of Uploading File Without Refreshing Page

• Master data. CRUD forms for the primary entities with search and filter.
• Transaction processing. Data entry forms for day-to-day operations the system automates.
• Reports. Formatted printable output summarizing activity per day, user, or category.
• User management. Login with role-based permissions (Admin, Encoder, Viewer).
• Backup and restore. Export database to a .sql file and restore when needed.

Common enhancements for capstone review

• Modernize the UI. Add Bootstrap 5 or Tailwind CSS for a polished appearance.
• Add printable receipts. Use TCPDF or FPDF to generate PDF reports.
• Multi-user concurrency. Ensure database handles simultaneous writes without lost-update errors.
• Rewrite in Laravel. Migrate to Laravel for maintainability and modern development patterns.

Related PHP Projects

• Upload File CodeIgniter AJAX With Source Code
• How To Upload Files Using PHP Tutorial
• Upload Show Image Using PHP MySQL
• Upload Multiple Files In PHP MySQLi
• Resize Upload Image PHP
• How To Upload Image Easily In PHP Using MySQL