• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
logo

Tutsplanet

Free Technical and Blogging Resources

  • Home
  • Web Hosting
  • Programming
  • Plugins
  • Write For US
  • News
  • About Us
  • Tools
You are here: Home / Programming / Multiple Files Upload using AJAX(jQuery) in Codeigniter

Multiple Files Upload using AJAX(jQuery) in Codeigniter

Sep 16, 2020 by Editorial Staff Leave a Comment

Today’s tutorial we are showing how to upload multiple files using ajax in Codeigniter.

Prerequisites

php7.2, Apache 2 Server, JQuery, Codeigniter 4

Creating the Project Directory

We are not talking about how to download and install Codeigniter in your local system. But you may this script in already installed Codeingter 4 instance.

Also create directory called uploads under the writable directory from project root.

Your controller will have the below methods, we will implement the function in the next steps.

 

<?php namespace App\Controllers;

class Upload extends BaseController
{
	public function index()
	{
		
	}

	public function doupload()
	{
		
	}
}

Above file, index method is just for showing the upload form, and there is nothing much happening in this method. The doupload method is responsible for the server side script to upload a real file and save in the server. We will write the contents of this file after we discuss the upload form in detail.

Create a View

Create a view called upload_form.php under app/Views folder. This view is called from the index method in Upload controller.

Below is the main content of the upload form view in our tutorial.

Include the jQuery library in the head section of the script, to execute the jQuery functions.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

I have used Bootstrap CSS here to get help for styling, so Bootstrap will deal with heavy lifting of CSS and not diving deep to that part.

<main style="width:500px;margin:0 auto;">
<form class="form-signin">

  <div id="message"></div>
  <div class="text-center mb-4">
    
    <h1 class="h3 mb-3 font-weight-normal">Upload Multiple Files</h1>
    <p>This form capable of upload multiple images at once.</p>
  </div>

  <div class="form-label-group">
    <input type="file" id="files" name="files[]" multiple="multiple" >
    <label for="inputEmail">Files</label>
  </div>

  
  <button class="btn btn-lg btn-primary btn-block" id="upload_btn" type="button">Upload</button>
  <p class="mt-5 mb-3 text-muted text-center">© 2017-2020</p>
</form>
</main>


<script type="text/javascript">
	$(document).ready(function (e) {
		$('#upload_btn').on('click', function () {
			var formData = new FormData();
			var totalFilesLen = document.getElementById('files').files.length;
			for (var i = 0; i < totalFilesLen; i++) {
				formData.append("files[]", document.getElementById('files').files[i]);
			}
			$.ajax({
				url: 'http://localhost:8888/codeigniter/public/upload/doupload',  
				dataType: 'text', 
				cache: false,
				contentType: false,
				processData: false,
				data: formData,
				type: 'post',
				success: function (response) {
					$('#message').html(response);
				},
				error: function (response) {
					$('#message').html(response); 
				}
			});
		});
	});
</script>

Controller function in detail

Below is the controller in full

 

<?php namespace App\Controllers;

class Upload extends BaseController
{
	public function index()
	{
		return view('upload_form');
	}

	public function doupload()
	{
		if($files = $this->request->getFiles())
		{	
			foreach($files['files'] as $file)
			{
				if ($file->isValid() && ! $file->hasMoved())
				{
					$newName = $file->getName();
					$file->move(WRITEPATH.'uploads', $newName);
				}
			}
			print "Files are uploaded";
		}
		else {
			print "There is no files selected";
		}
	}

}

You can see the index() method just called the upload form to display the multiple upload form.
The next method doupload() is the main method that upload the files to server via Ajax. At first line, it check is there any files existing, if so it uploads the file in the next line. I have used codeigniter $request library to fulfill the file upload. You can use whatever php way that you familiar with.


Editorial Staff

Editorial Staff at Tutsplanet is a dedicated team to write various tutorials about subjects like Programming, Technology and Operating Systems.

View all posts by Editorial Staff

Filed Under: Programming

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar




Quick Links

  • A Simple YouTube Video Downloader Script in PHP
  • The 50 Most Useful jQuery Plugins for Frontend Development
  • Word Set 01
  • Convert PNG to JPG Online

Subscribe

* indicates required

Share

   

Hot topics

  • A Simple YouTube Video Downloader Script in PHP 13.2k views
  • Open a URL in a new tab using JavaScript 10.6k views
  • Using Third-Party Libraries in Codeigniter 8.3k views
  • Add FTP/SFTP in Visual Studio Code 6k views
  • Manually Install APK Files In Android Studio Emulator 4.6k views
  • Replace “\n” with new line characters, using Notepad++ 4.6k views
  • Upload Multiple Images and Store in Database using PHP and MySQL. 4.4k views
  • How To Install And Use CKEditor In Laravel? 4.2k views
  • Simple PHP Shopping Cart 4k views
  • Spout, an awesome library for reading and writing in Excel. 3.3k views

Categories

  • Design & Development
  • Drupal
  • Facebook
  • General
  • How To
  • ios
  • Javascript
  • Linux
  • Magento
  • Marketing
  • News
  • PHP
  • Plugins
  • Programming
  • Snippets List
  • Social Media
  • Softwares
  • Themes
  • Tips
  • Wordpress
  • YouTube

Copyright © 2021 · TutsPlanet Gene Theme on Genesis Framework · Powered By BunnyCDN