upload image in codeigniter using ajax

0
votes


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 getShowcases(){
        $query = $this->db->query("SELECT * FROM showcase ORDER BY showcase_id DESC");
        $result = $query->result();
        return $result;
    }

    public function getImagesShowcase($idShowcase){
        $query = $this->db->query("SELECT * FROM showcase_gallery WHERE showcase_gallery_project_id='".$idShowcase."' AND showcase_gallery_type='image' ORDER BY showcase_gallery_index ASC");
        $result = $query->result();
        return $result;
    }

And on the view side I have some ajax:

 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;
}


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

2
javascriptajaxcodeigniter

2 Answers

0
votes

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.

0
votes

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" />