This time i will share about upload an image using ajax and jquery. I made this tutorial as a documentation when i made an application program using codeigniter. This tutorial needs Codeigniter framework. Ok, stop your blabbermouth and start coding. Here is the short explanation taken from the author here.

This AjaxFileUpload Plugin is a hacked version of Ajaxupload plugin created by yvind Saltvik, which is really good enough for normal use. Its idea is to create a iframe and submit the specified form to it for further processing.

In this hacked version, it submits the specified file type of input element only rather than an entire form

how to use it
1.include jquery.js & ajaxfileupload.js javascript files in views (upload_form.php)

if ( ! defined('BASEPATH')) exit('No direct script access allowed');?>

	
		
	
	
	
	
	

	

    

    	
JQuery - CodeIgniter File Upload Demo
    	
Upload file using CodeIgniter File Uploading Class and JQuery
				

				Need any Web-based Information System?
 Please Contact Us

		

		

		

			

				
Please select a file and click Upload button
			
		
		

			

				
			
		
			

				

					
Upload
				
			
	
		
		
		

    
	

As for the controller

class Upload extends Controller {
 function Upload()
 {
  parent::Controller();
 }
 function index()
 {
  $this->load->view('upload_form');
 }
 function do_upload()
 {
   $error = "";
   $msg = "";
  $config['upload_path'] = './upload/';
  $config['allowed_types'] = 'doc|xls|ppt|pdf|rar|zip';
  $config['max_size'] = '1000';
  $this->load->library('upload', $config);
  $this->upload->display_errors('','');
  if ( ! $this->upload->do_upload("fileToUpload"))
  {
       $error = $this->upload->display_errors();
  }
  else

  {
        $msg = "Success";
  }
  echo "{";
   echo    "error: '" . $error . "',n";
   echo    "msg: '" . $msg . "'n";
   echo "}";
 }
}

Don’t forget to create upload folder in your codeigniter directory.
Try it and let me know if you have some problems.

Source here and here