Upload File CodeIgniter Ajax With Source Code

Upload File CodeIgniter Ajax is the process of sending a file from one computer system to another, usually larger computer system.

From the point of view of a network user, uploading a file means sending it to a computer that is set up to receive it.

About The Project

Upload File was developed using CodeIgniter, Ajax and MySQL Database as Back-End. Most web applications require file management.

If you’re creating a content management system, you’ll need to be able to upload photos, word documents, and PDF reports, among other things. If you’re creating a membership site, you may need to include a feature that allows users to upload their profile pictures. All of the following is made simple with CodeIgniter’s File Uploading class.

In File Upload With CodeIgniter, there are two stages to file uploading. There are two parts to a website: the frontend and the backend.

The HTML form that employs the form input type file handles the frontend. The File Upload In CodeIgniter With Example processes the form’s submitted data and saves it to the upload directory on the backend.

What is CodeIgniter?

CodeIgniter is an Application Development Framework – a toolset – for PHP web site developers. Its purpose is to let you construct projects much faster than if you were programming code from start by providing a rich set of libraries for common activities, as well as a simple interface and logical structure to access these libraries.

By reducing the amount of code required for a given operation, CodeIgniter allows you to focus more creatively on your project.

In this CodeIgniter Project also includes a downloadable CodeIgniter File Upload Code for free, just find the downloadable source code below and click to start downloading.

To start executing this File Upload With Source Code, makes sure that you have sublime or any platform of PHP and MySQL installed in your computer.

Steps On How To Run The File Upload CodeIgniter With Source Code

Time needed: 5 minutes.

These are the steps on how to run File Upload CodeIgniter With Source Code.

  • Download Source Code

    First, find the downloadable source code below and click to start downloading the source code file.
    download source code

  • Extract File

    Next, after finished to download the file, go to file location and right click the file and click extract.
    file upload extract file

  • Copy Project Folder

    Next, copy the project folder and paste it to C:\xampp\htdocs.
    file upload copy folder

  • Open Xampp

    Next, open xampp and start the apache and mysql.
    file upload open xampp

  • Create Database

    Next, click any browser and type to the URL localhost/phpmyadmin and create database.
    file upload create database

  • Import Database

    Next, click the created database and click import to the right tab and click choose file and import the sql file inside the download folder.
    file upload import sql file

  • Execute Project

    Final, type to the URL localhost/codeigniter_fileupload.
    file upload run project

How To Create A File Upload In CodeIgniter

Here’s the complete source code on how to create a file upload.

<!DOCTYPE html>
	<meta charset="utf-8">
	<title>CodeIgniter File Upload (IT SOURCECODE)</title>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>bootstrap/css/bootstrap.min.css">
	<script src="<?php echo base_url(); ?>jquery/jquery.min.js"></script>
<body class="bg-info">
<div class="container">
	<h1 class="page-header text-center">CodeIgniter File Upload (IT SOURCECODE)</h1>
	<div class="row">
		<div class="col-sm-4">
			<h3>File Upload Form</h3>
			<form id="uploadForm">
				<div class="form-group">
					<input type="file" name="upload" id="file">
				<button type="submit" class="btn btn-primary">Save</button>
			<div id="responseDiv" class="alert text-center" style="margin-top:20px; display:none;">
				<button type="button" class="close" id="clearMsg"><span aria-hidden="true">&times;</span></button>
				<span id="message"></span>
		<div class="col-sm-8">
			<table class="table table-bordered table-striped">
				<tbody id="tbody">
<script type="text/javascript">

			var url = '<?php echo base_url(); ?>';

			var reader = new FileReader();

			var formdata = new FormData();
			formdata.append('file', document.getElementById('file').files[0]);
				method: 'POST',
				contentType: false,
			    cache: false,
			    processData: false,
			    data: formdata,
			    dataType: 'json',
				url: url + 'index.php/upload/insert',
				success: function(response){


	function fetchTable(){
		var url = '<?php echo base_url(); ?>';
			method: 'POST',
			url: url + 'index.php/upload/fetch',
			success: function(response){

Project Output

File Upload CodeIgniter Output
File Upload CodeIgniter Output

Project Information’s

Project Name:File Upload Using CodeIgniter With Source Code
Language/s Used:PHP with CodeIgniter Web Framework
PHP version (Recommended):5.6.3
Type:Web Application
File Upload in PHP– Project Information

Download Source Code below

Anyway, if you want to level up your programming knowledge, especially PHP, try this new article I’ve made for you Best PHP Projects With Source Code Free Download 2021.


This lesson did not cover all that a full-fledged tutorial would, but it did introduce you to the most important modules, developing controllers, and models.

We hope that our CodeIgniter instructional File Upload offered you some insight into some of CodeIgniter’s basic design patterns, which you may build on.


If you have any questions or suggestions about File Upload CodeIgniter With Source Code, please feel free to leave a comment below.

3 thoughts on “Upload File CodeIgniter Ajax With Source Code”

Leave a Comment