How-To: Reload verification image using Codeigniter 2 CAPTCHA helper

Out of the box, CodeIgniter has a good CAPTCHA helper to use in your web applications. Here is a simple example of how to get a new CAPTCHA image without having to reload the page ūüėČ

Basic Controller

class Welcome extends CI_Controller {

    private $captcha_path = 'assets/img/captcha/';

    public function __construct()
    {
        parent::__construct();
    }

    public function index()
    {
        $this->load->helper(array('captcha'));
        $captcha = create_captcha(array(
            'word'        => strtoupper(substr(md5(time()), 0, 6)),
            'img_path'    => $this->captcha_path,
            'img_url'    => $this->captcha_path
        ));
        $data = array(
            'captcha'        => $captcha
        );
        $this->session->set_userdata('captcha', $captcha['word']);
        $this->load->view('welcome', $data);
    }

}

The View (jQuery used for UI buttons and altering CAPTCHA image ‘src’ attribute)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/blitzer/jquery-ui.css">
<script>
$(function(){
    $('#new_captcha').button({
        text: false,
        icons: {
            primary: 'ui-icon-refresh'
        }
    }).click(function(event){
        event.preventDefault();
        $(this).prev().attr('src', 'welcome/new_captcha?'+Math.random());
    });
});
</script>
<?php echo $captcha['image']; ?>
<a href="#" id="new_captcha">Reload CAPTCHA</a>

Modified Controller

class Welcome extends CI_Controller {

    private $captcha_path = 'assets/img/captcha/';

    public function __construct()
    {
        parent::__construct();
    }

    public function index()
    {
        $this->load->helper(array('captcha'));
        $captcha = create_captcha(array(
            'word'        => strtoupper(substr(md5(time()), 0, 6)),
            'img_path'    => $this->captcha_path,
            'img_url'    => $this->captcha_path
        ));
        $data = array(
            'captcha'        => $captcha
        );
        $this->session->set_userdata('captcha', $captcha['word']);
        $this->load->view('welcome', $data);
    }

    public function new_captcha()
    {
        $this->load->helper(array('captcha', 'file'));
        $captcha = create_captcha(array(
            'word'        => strtoupper(substr(md5(time()), 0, 6)),
            'img_path'    => $this->captcha_path,
            'img_url'    => $this->captcha_path
        ));
        $this->session->set_userdata('captcha', $captcha['word']);
        $filename = $this->captcha_path . $captcha['time'] . '.jpg';
        $this->output->set_header('Expires: Sat, 26 Jul 1997 05:00:00 GMT');
        $this->output->set_header('Cache-Control: no-cache, no-store, must-revalidate, max-age=0');
        $this->output->set_header('Cache-Control: post-check=0, pre-check=0', FALSE);
        $this->output->set_header('Pragma: no-cache');
        $this->output->set_header('Content-Type: image/jpeg');
        $this->output->set_header('Content-Length: ' . filesize($filename));
        echo read_file($filename);
    }

}

Result…

Enjoy ūüôā

9 thoughts on “How-To: Reload verification image using Codeigniter 2 CAPTCHA helper”

  1. nice works, thanks. But every time I reloaded image successfully, but failed to update image word session, can you help me?

    Thanks
    Jobayer

    1. If the image is being reloaded, then the session word is automatically updated by the underlying ajax call. Can you describe the problem more specifically?

  2. Nice. Thanks. If the image isn’t displaying correctly, beware of any data hitting your header first, like a mysterious empty line above the !DOCTYPE tag.

    1. BOM (byte order mark) is the usual culprit. Most PHP developers should be well aware of that potential problem. I first encountered that years ago. Most editors now do not include a BOM these days.

Leave a Reply

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