How to set Ajax Upload of Img File in Codeigniter

Question

I read many tutorial about uploading files using codeigniter, but the problem is those tutorial are not working in my situation, and i didn't succeed in uploading via ajax, the request failed and the page load in the navbar which is not ajax, i want to find a very detailed tutorial that explain the basics of ajax upload in codeigniter. or some advice in that topic.

Answer 1

This Code Work pretty Well for me, you need just to manage it on the controller.

don't forget to add jquery.form.min.js.

<script>
function service_switch()
{
    $('#service_update').ajaxSubmit({ 

        beforeSubmit: function() {
            $("#switch").html('<img alt=""'+
            ' src="<?=base_url()."assets/default/"?>img/preloaders/ajax-loader.gif"  align="center" />  0% Switching.');
        },

        uploadProgress: function (event, position, total, percentComplete){ 
            $("#switch").html('<img alt=""'+
            ' src="<?=base_url()."assets/default/"?>img/preloaders/ajax-loader.gif"  align="center" />  '+perc+'% Switching ...');
            },

        success:function (d){
            if(d=='success'){
                $("#switch").html(' 100% Switched Successfully !');
            }else{
                $("#switch").html(' '+d);
            }
        },

        error:function(){$("#switch").html('segmentation fault');},

        resetForm: true 
    }); 

}
</script>


<!--Firmware MAC Configuaration Form-->
<?php

//shell_exec("gnome-terminal -e ping 127.0.0.1 &"); 
//shell_exec("geany"); 

$attribute = array('class'=> 'box validate','id'=>'service_update');?>

<?php echo form_open('firmware_update/service_switch',$attribute);?>
<div class="header">
    <h2>
        Service Update
    </h2>
</div>
<div class="content">
    <div class="row">
        <label>
            <strong>Switch Service </strong>
        </label>
        <div>
            <div>
                <input type="radio" name="demo" id="demo1"  value="1">
                <label for="demo1">demo1</label>
            </div>
            <div>
                <input type="radio" name="demo" id="demo2"  value="2">
                <label for="f4_rb_dis2">service2_RX</label>
            </div>
            <div>
                <input type="radio" name="demo" id="demo3"  value="3">
                <label for="demo1">service2_TX</label>
            </div>
            <div>
                <input type="radio" name="demo" id="demo4"  value="4">
                <label for="demo1">service3</label>
            </div>
        </div>
    </div>
</div>
<div class="actions">
    <div class="right">
        <a onclick="service_switch();" class="button blue flat" >Switch Service</a>
    </div>
</div>
<?php echo form_close(); ?>