перезагрузите изображение с помощью jquery и codeigniter

Question

перезагрузите изображение с помощью jquery и codeigniter

0

Я хочу иметь кнопку перезагрузки рядом с моим изображением captcha, чтобы перезагрузить его с помощью jquery в codeigniter. Я обыскал сеть, чтобы найти решение для нее, но все, что я нашел, смутил меня.

это мой контроллер:

function create_captcha()
{                                
    $expiration = time()-300; // Two hour limit
    $this->db->query("DELETE FROM captcha WHERE captcha_time < ".$expiration);
    $vals = array(
                //'word'         => 'Random word',
                'word_length' => 4,
                'img_path' => './uploads/captcha/',
                'img_url' => base_url().'uploads/captcha/',
                'font_path' => './system/fonts/texb.ttf',
                'img_width' => '110',
                'img_height' => '30',
                'expiration' => '3600'
            );

    $cap = create_captcha($vals);

    //puts in the db
    $captchadata = array(
                'captcha_id'    => '',
                'captcha_time'  => $cap['time'],
                'ip_address'    => $this->input->ip_address(),
                'word'          => $cap['word']
            );

    $query = $this->db->insert_string('captcha', $captchadata);
    $this->db->query($query);

    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') echo $cap['image'];
    else return $cap['image'];

и это мое мнение:

<div class="captcha-area">
    <? echo form_input('captcha', '', 'class="field text captcha"')?>
    <div id="cap-img">
        <? echo $image;?>
    </div>
    <a title="reload" class="reload-captcha" href="#"><img src="<? echo base_url(); ?>images/reload.png" /></a>                                
    <div class="clear"></div>
 </div>
 <script>
      $(function(){
          var base_url = '<?php echo base_url(); ?>';
          $('.reload-captcha').click(function(event){
              event.preventDefault();
              $('.captcha-img').attr('src', base_url+'dashboard/create_captcha?'+Math.random());
          });
       });
 </script>

РЕДАКТИРОВАТЬ:

это исходный код после загрузки сайта

<div class="captcha-area">
   <input type="text" name="captcha" value="" class="field text captcha">
   <div id="cap-img">
       <img src="http://example.com/uploads/captcha/1382346264.1026.jpg" width="110" height="30" class="captcha-img" style="border:0;" alt=" ">
   </div>
   <a title="reload" class="reload-captcha" href="#"><img src="http://example.com/images/reload.png"></a>                                
   <div class="clear"></div>
</div>

и когда я нажимаю кнопку перезагрузки, она меняет атрибут src на что-то вроде:

<img src="http://example.com/dashboard/create_captcha?0.8049291325733066" width="110" height="30" class="captcha-img" style="border:0;" alt=" ">

Afshin 21 окт. 2013, в 13:19

Источник

Теги:

jquery

codeigniter

captcha

3 ответа

2

# Вы можете перезагрузить img, используя ajax и javascript, см. Мой код

# Вы должны создать папку captcha в корневой папке CI

# Папка captcha разрешение на 777 или 666 означает (читать, писать для всех)

# Затем посмотрите, как ci/captcha

# Затем посмотрите, как ci/application

Мой просмотр html.php

<html>
<head>
<script>
    function postRequest(strURL) 
    {
        var xmlHttp;
        if (window.XMLHttpRequest) // Mozilla, Safari, ...
        { 
            var xmlHttp = new XMLHttpRequest();
        } 
        else if (window.ActiveXObject) // IE 
        { 
             var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else
        {
            alert("your browser does not support AJAX");
            return;
        }
        xmlHttp.open('POST', strURL, true);

        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        xmlHttp.onreadystatechange = function() 
        {

            if (xmlHttp.readyState == 4 && xmlHttp.status==200) 
            {
                reload_captcha(xmlHttp.responseText);
            }
        }
        xmlHttp.send(strURL);
    }

    function reload_captcha(str)
    {
        document.getElementById("captcha-img").innerHTML = str;
    }

    function get_captcha()
    {
        //<a href="#" onclick="JavaScript:get_captcha()" ></a>
        document.getElementById("captcha-img").innerHTML = '<img src="<?php echo base_url('asset/img/loader.gif'); ?>" height="35" width="37" />';
        var url="<?php echo base_url('index/reload_captcha'); ?>";
        postRequest(url);
    }
</script>
</head>
<body>
<label>Human test</label>
<input type="text" autocomplete="off" maxlength="5" name="captcha" value="" />
<span id="captcha-img" class="captcha-img">
    <?php echo $captcha_img; ?>
</span>
<a href="#reload" onclick="JavaScript:get_captcha()" ><img class="reload-img" src="<?php echo base_url('asset/img/reload.png'); ?>" alt="reload" /></a>
</body>
</html>

Мой контроллер index.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Index extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->load->database();
        $this->load->library('form_validation');
        $this->load->helper('date');
    }
    public function index()
    {
        $this->form_validation->set_rules('captcha', 'Security','trim|required|xss_clean|callback_check_captcha');

        if($this->form_validation->run() == False)
        {
            $data['captcha_img'] = $this->get_captcha();

        $this->load->view('html',$data);
    }
}

private function _generate_string($min, $max)
{
    $pool = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
    $pool = str_shuffle($pool);
    $str = '';

    for ($i = 0; $i < 5; $i++)
    {
        $str .= substr($pool, mt_rand(0, strlen($pool) -1), 1);
    }

    return $str;
}

public function get_captcha()
{
    $this->load->helper('captcha');

    $word = $this->_generate_string(2,5);

    $vals = array(
                    'word' => $word,
        'img_path'   => './captcha/',
        'img_url'    => base_url().'captcha/',
        'img_width'  => 120,
        'img_height' => 35,
        'border' => 0, 
        'font_path' => './system/fonts/texb.ttf',
        'expiration' => 3600 //1 houre
    );

    $cap = create_captcha($vals);

    $this->session->set_userdata($cap['word']);

    return $cap['image'];
}

public function reload_captcha()
{
    $new_captcha = $this->get_captcha();
    echo "".$new_captcha;
}

public function check_cap_tcha()
{
    $session_captcha_code = $this->session->userdata('word');

    if($session_captcha_code == $user_captcha_code)
    {
        return true;
    }else{
        $this->form_validation->set_message('check_captcha', "Security code does not match !");
        return false;
    }
}
}

А ведь все хорошо работает!

absiddiqueLive 14 янв. 2014, в 18:13

2

Добавьте controller name и используйте ajax например,

$(function(){
    var base_url = '<?php echo base_url(); ?>';
    $('.reload-captcha').click(function(event){
        event.preventDefault();
        $.ajax({
           url:base_url+'dashboard/create_captcha?'+Math.random(),
           success:function(data){
              $('.captcha-img').attr('src', data);
           }
        });            
    });
});

Rohan Kumar 21 окт. 2013, в 09:26

0

Конечно, у меня был контроллер, но я здесь его опустил. Я редактировал пост, посмотрите на него.
Afshin 21 окт. 2013, в 10:56
0

@Afshin видите, я изменил свой ответ, вам нужно использовать ajax для этого
Rohan Kumar 21 окт. 2013, в 11:05
0

на этот раз он поместил весь HTML-код в атрибут src. это выглядит так: src="<html>....</html>"
Afshin 21 окт. 2013, в 11:20
0

Я немного изменил ваш код и разместил его ниже. Спасибо большое за помощь
Afshin 21 окт. 2013, в 11:38

Показать ещё 2 комментария

Ещё вопросы

Конечно, у меня был контроллер, но я здесь его опустил. Я редактировал пост, посмотрите на него.
@Afshin видите, я изменил свой ответ, вам нужно использовать ajax для этого
на этот раз он поместил весь HTML-код в атрибут src. это выглядит так: src="<html>....</html>"
Я немного изменил ваш код и разместил его ниже. Спасибо большое за помощь

Afshin · Accepted Answer · 2013-10-21T08-45-00.000Z

Я немного изменил код Рухана Кумара и мог получить удовлетворяющий код:

<script>
     $(function(){
         var base_url = '<?php echo base_url(); ?>';
         $('.reload-captcha').click(function(event){
             event.preventDefault();
             $.ajax({
                 url:base_url+'admin/dashboard/create_captcha',
                 success:function(data){
                     $('.captcha-img').replaceWith(data);
                 }
             });            
          });
      });
</script>