AJAX Multiple Files Upload using Codeigniter, jQuery
Introduction
I will show you how to upload multiple files using Codeigniter,
Codeigniter controller stores files into the defined location and returns response as success or failure messages from the controller. As a validation step I have added only to check if you have selected a file for uploading or not.
Related Posts:
- AJAX File Upload using Codeigniter, jQuery
- AJAX Multiple Files Upload using PHP, jQuery
- AJAX File Upload using PHP, jQuery
Prerequisites
Apace HTTP Server 2.4, PHP 7.3.5/7.4.3, Codeigniter 3.1.10/3.1.11, jQuery 3.4.1/3.5.1
Make sure you create a folder uploads under your project root directory to store your uploaded files.
Project Directory
Create a project ditectory called codeigniter-jquery-ajax-multiple-file-upload under <apache server installation directory>/htdocs.
I will also create a directory called uploads under project root directory, where file will be uploaded.
I may not mention the project root directory in subsequent sections but I will assume that I am creating files or folders with respect to the project root directory.
Configuring Auto-load
Now modify application/config/autoload.php file for auto-loading html, url, file, form.
$autoload['helper'] = array('html', 'url', 'file', 'form');Controller Class
Create a controller file AjaxMultipleFileUpload.php under
/application/controllers with the following source code.
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
/**
* Description of ajaxupload
*
* @author https://roytuts.com
*/
class AjaxMultipleFileUpload extends CI_Controller {
function __construct() {
parent::__construct();
}
function index() {
$this->load->view('files_upload_ajax', NULL);
}
function upload_files() {
if (isset($_FILES['files']) && !empty($_FILES['files'])) {
$no_files = count($_FILES["files"]['name']);
for ($i = 0; $i < $no_files; $i++) {
if ($_FILES["files"]["error"][$i] > 0) {
echo "Error: " . $_FILES["files"]["error"][$i] . "<br>";
} else {
if (file_exists('uploads/' . $_FILES["files"]["name"][$i])) {
echo 'File already exists : uploads/' . $_FILES["files"]["name"][$i];
} else {
move_uploaded_file($_FILES["files"]["tmp_name"][$i], 'uploads/' . $_FILES["files"]["name"][$i]);
echo 'File successfully uploaded : uploads/' . $_FILES['files']['name'][$i] . ' ';
}
}
}
} else {
echo 'Please choose at least one file';
}
}
}View
Create a view file files_upload_ajax.php under application/views directory.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX File upload using Codeigniter, jQuery</title>
<!--<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$('#upload').on('click', function () {
var form_data = new FormData();
var ins = document.getElementById('multiFiles').files.length;
for (var x = 0; x < ins; x++) {
form_data.append("files[]", document.getElementById('multiFiles').files[x]);
}
$.ajax({
url: 'http://localhost/codeigniter-jquery-ajax-multiple-file-upload/index.php/ajaxmultiplefileupload/upload_files', // point to server-side controller method
dataType: 'text', // what to expect back from the server
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function (response) {
$('#msg').html(response); // display success response from the server
},
error: function (response) {
$('#msg').html(response); // display error response from the server
}
});
});
});
</script>
</head>
<body>
<p id="msg"></p>
<input type="file" id="multiFiles" name="files[]" multiple="multiple"/>
<button id="upload">Upload</button>
</body>
</html>Configuring Route
Modify file application/config/routes.php file to configure the default controller that will be called upon context root access of the application.
$route['default_controller'] = 'ajaxmultiplefileupload';Testing the Application
If everything is fine then run the application by hitting the URL http://localhost/codeigniter-jquery-ajax-multiple-file-upload. You will get the output in the browser as shown in the below image:
If you try to upload file without selecting any file then you would see error message – Please choose at least one file.
If the file successfully uploaded then you will see success message File successfully uploaded : uploads/<file-name>.
If the file you are trying to upload already exists then you will see a message File already exists : uploads/<file-name>.
Hope you have got an idea how to upload multiple files using Codeigniter, AJAX and jQuery.
No comments