upload image in codeigniter using ajax

Question

I have a problem with the upload of some images. So...I have the admin side in which I click on the "Add image" button and I begin adding the images. When I begin adding them the image is not shown so that I can see it. And when I click save the images should save to a certain location. My question is: why can't I see my images after I click the Add image button? and why aren't the pictures being saved in the path that I specify? Thanks a lot! I also added some code here:
This is in my controller:

 public function showcase_image(){ try{ $config['upload_path'] = './resources/media/showcase/image/'; $config['allowed_types'] = 'jpeg|png|jpg|flv|mp3|wav'; $config['max_size'] = '10000'; $this->load->library('upload', $config); $this->upload->do_upload('add_image'); $data = $this->upload->data(); $w = 720; $h = 425; $this->load->library('image_lib'); $config['image_library'] = 'gd2'; $config['source_image'] = $data['full_path']; $config['create_thumb'] = TRUE; $config['maintain_ratio'] = TRUE; $config['thumb_marker'] = ''; $config['width'] = $w; $config['height'] = $h; $this->image_lib->initialize($config); if($data['image_width']<425 && $data['image_height']<425){ }else{ $this->image_lib->resize(); } $file = $data['file_name']; echo json_encode(array("error"=>false,"msg"=>"success","file"=>$file,"dir"=>"image")); }catch(Exception $e) { echo json_encode(array("error"=>true,"msg"=>$e->getMessage())); } }
 This is in my model:
 

public function showcase_image(){ try{ $config['upload_path'] = './resources/media/showcase/image/'; $config['allowed_types'] = 'jpeg|png|jpg|flv|mp3|wav'; $config['max_size'] = '10000'; $this->load->library('upload', $config); $this->upload->do_upload('add_image'); $data = $this->upload->data(); $w = 720; $h = 425; $this->load->library('image_lib'); $config['image_library'] = 'gd2'; $config['source_image'] = $data['full_path']; $config['create_thumb'] = TRUE; $config['maintain_ratio'] = TRUE; $config['thumb_marker'] = ''; $config['width'] = $w; $config['height'] = $h; $this->image_lib->initialize($config); if($data['image_width']<425 && $data['image_height']<425){ }else{ $this->image_lib->resize(); } $file = $data['file_name']; echo json_encode(array("error"=>false,"msg"=>"success","file"=>$file,"dir"=>"image")); }catch(Exception $e) { echo json_encode(array("error"=>true,"msg"=>$e->getMessage())); } }
This is in my model:


public function showcase_image(){ try{ $config['upload_path'] = './resources/media/showcase/image/'; $config['allowed_types'] = 'jpeg|png|jpg|flv|mp3|wav'; $config['max_size'] = '10000'; $this->load->library('upload', $config); $this->upload->do_upload('add_image'); $data = $this->upload->data(); $w = 720; $h = 425; $this->load->library('image_lib'); $config['image_library'] = 'gd2'; $config['source_image'] = $data['full_path']; $config['create_thumb'] = TRUE; $config['maintain_ratio'] = TRUE; $config['thumb_marker'] = ''; $config['width'] = $w; $config['height'] = $h; $this->image_lib->initialize($config); if($data['image_width']<425 && $data['image_height']<425){ }else{ $this->image_lib->resize(); } $file = $data['file_name']; echo json_encode(array("error"=>false,"msg"=>"success","file"=>$file,"dir"=>"image")); }catch(Exception $e) { echo json_encode(array("error"=>true,"msg"=>$e->getMessage())); } }
This is in my model:


function ajaxFileUploadImage(){
    $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })
        .ajaxComplete(function(){
            $(this).hide();
        });
    $.ajaxFileUpload
    (
        {
            url:'<?=site_url('ajaxadmin/showcase_image')?>',
            secureuri:false,
            fileElementId:'add_image',
            dataType: 'json',
            data:{},
            success: function (data, status)
            {
                //jQuery('.thumb_file').attr('src','<?=base_url()?>resources/media/our_work/thumb/'+data.file);
                //jQuery('input[name=thumb]').val(data.file);
                var image = ' \
                <div class="list" style="float:left;position:relative;margin-left:10px;margin-top:10px;"> \
                    <div class="description_img"> \
                        <div class="delete_img"></div> \
                    </div> \
                    <img height="100" src="<?=base_url()?>resources/media/showcase/image/'+data.file+'" style="z-index: 0; position: relative;"/> \
                    <div class="move_arrows"> \
                        <div class="move_on_left"></div> \
                        <div class="move_on_right"></div> \
                    </div> \
                    <input type="hidden" name="image_filename[]" class="image_filename" value="'+data.file+'"/> \
                </div> \
                ';
                jQuery('#showcase_image').append(jQuery(image));
            },
            error: function (data, status, e){
                jQuery('.response_mes').html('<span class="red">* please try again later!</span>');
            }
        }
    )
    return false;
}

And on the view side I have some ajax:

 function ajaxFileUploadImage(){\n    $("#loading") \n        .ajaxStart(function(){ \n            $(this).show(); \n        }) \n        .ajaxComplete(function(){ \n            $(this).hide(); \n        }); \n    $.ajaxFileUpload \n    ( \n        { \n            url:'<?=site_url('ajaxadmin/showcase_image')?>', \n            secureuri:false,\n            fileElementId:'add_image', \n            dataType: 'json',\n            data:{},\n            success: function (data, status)\n            { \n                //jQuery('.thumb_file').attr('src','<?=base_url()?>resources/media/our_work/thumb/'+data.file); \n                //jQuery('input[name=thumb]').val(data.file); \n                var image = ' \\ \n                <div class="list" style="float:left;position:relative;margin-left:10px;margin-top:10px;"> \\ \n                    <div class="description_img"> \\ \n                        <div class="delete_img"></div> \\ \n                    </div> \\ \n                    <img height="100" src="<?=base_url()?>resources/media/showcase/image/'+data.file+'" style="z-index: 0; position: relative;"/> \\ \n                    <div class="move_arrows"> \\ \n                        <div class="move_on_left"></div> \\ \n                        <div class="move_on_right"></div> \\ \n                    </div> \\ \n                    <input type="hidden" name="image_filename[]" class="image_filename" value="'+data.file+'"/> \\ \n                </div> \\ \n                '; \n                jQuery('#showcase_image').append(jQuery(image)); \n            }, \n            error: function (data, status, e){\n                jQuery('.response_mes').html('<span class="red">* please try again later!</span>'); \n            } \n        } \n    ) \n    return false;\n} \n

I hope this code will be useful and maybe if someone has a soultion would be great.:D

Answer 1

example of how to upload image using ajax. i think this will help you out.

 <script type="text/javascript"> $(document).ready(function(){ $("#upfile1").click(function () { $("#file1").trigger('click'); }); var input = document.querySelector('input[type=file]'); input.onchange = function () { var file_data = $("#file1").prop("files")[0]; // Getting the properties of file from file field var form_data = new FormData(); // Creating object of FormData class form_data.append("file", file_data) var filevalue = $("#file1").val(); console.log(form_data); $.ajax({ url:'index.php/welcome/uploadImage', type:'POST', data : form_data, cache: false, contentType: false, processData: false, success:function( data ) { console.log(data); }, error:function( error ){ console.log(error); } }); } }); <input type="file" id="file1" name="image" value="" accept="image/*" capture style="display:none"/> <img src="http://macgroup.org/blog/wp-content/uploads/2011/10/iphone-camera-icon-150x150.jpg" id="upfile1" style="cursor:pointer" />

Answer 2

I'm assuming you're using the jQuery AjaxFileUpload plugin found here which uses the "iFrame" upload trick. You should try using qqFileUploader from valums which uses pure AJAX to upload if the browser supports it and falls back on iFrame if necessary. I believe it is a superior way to upload via AJAX and will be easier to implement.