Codeigniter Ajax Upload File - Upload File With Ajax In Codeigniter

codeigniter ajax Upload file – how to Upload file with ajax in codeigniter

codeigniter ajax Upload file – In this tutorial we provide information about Upload multiple files with ajax using codeigniter. in this tutorial we provide code to Upload multiple files using axaj without page redirection. this code is very easy to understand and execute.

Add/create this code in Upload.php. in this code we use ajax call for Upload multiple files. On submit of form, it will call function fileUpload() add we get all file information from

tag using “#file_upload_form” id( we use id of form tag) and pass data to ajax call to Upload.php controller. And most Impotent thing Do not miss mimeType : “multipart/form-data” in ajax call.

codeigniter ajax Upload file path

Path : codeigniter_folder/application/views/Upload.php

codeigniter ajax Upload file – Upload.php

<!-- add jquery.min.js to <head> tag -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
<script type="text/javascript">
function fileUpload()
{ 
    var upload_data = new FormData($('#file_upload_form')[0]);
    $.ajax({
	type : "POST", //  add type of form
	url : "<?php echo site_url('Upload/fileUpload');?>",
	mimeType : "multipart/form-data",
	contentType : false,			
	processData : false,
	cache : false,			
	data : upload_data,
	success : function(results)
	{ 
	    // print success result 
	    console.log( "success Message = " +  results );
        } // end of success
    }); // end of ajax call 
} // end of function fileUpload 
 
</script>
<form name="file_upload_form" id="file_upload_form" class="form upload-file"> 
    <input id="file_upload" name="file_upload" class="file-upload-icon" type="file" />
    <input type="submit" class="btn btn-submit" onclick = "return fileUpload()" />
</form>

Upload.php controller index.php is add upload library, helper and view Upload.php page And in function fileUpload () we Upload file in server folder and return success message.

Path : codeigniter_folder/application/Controllers/Upload.php
Upload.php controller

// check BASEPATH is defined or exit.
defined('BASEPATH') OR exit('No direct script access allowed'); 
class Upload extends CI_Controller {  
	public function __construct() { 
		parent::__construct(); 
	} 
	public function index() // add you code for 
	{	
            // ajax Upload file
	    // include upload library, helper and view Upload.php page in controller 
	    $this->load->library('upload');   // add upload library
	    $this->load->helper(array('url')); // add helper
	    $this->load->view('Upload'); // view Upload.php
	}	
        public function fileUpload()
	{
            // ajax Upload file
	    //$file_upload = $_FILES["file_upload"];
	    // var_dump($file_upload); // if need to debugging code
	    // upload file location or change/add your path 
	    $uploads_dir = "upload_dir/"; // add upload folder name 
	    $file_name = $_FILES["file_upload"]["name"]; // rename file if you have to
	    $path_of_file = $uploads_dir.$file_name; 
	    // move file in to server 
	    move_uploaded_file($_FILES["file_upload"]["tmp_name"],path_of_file);
	    echo "File uploaded successfully"; // echo success message to view
	} 
}

This code is very easy to use and execute in codeigniter. I hope it will help you.

codeigniter ajax Upload file – Upload file with ajax in codeigniter

codeigniter ajax Upload file – how to Upload file with ajax in codeigniter

codeigniter ajax Upload file path

Leave a Comment Cancel Reply