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

davidethell · Accepted Answer · 2012-03-08 09:37:43Z

0

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.

answered Mar 8, 2012 at 9:37

davidethell

12.1k6 gold badges47 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mitik Popovici Over a year ago

but with ajaxfileupload can't I fix this problem? the thing is that in one part where I have to upload projects it works perfectly and when I try to load photos for showcase it doesn't. i tryed copying the code from one part to the other but I got the same results

davidethell Over a year ago

I agree that you should be able to get it to work using your existing codebase. Have you inspected the contents of your $_POST array that is coming into CodeIgniter to be certain that all the file upload details are correct?

Nitesh Mangla · Accepted Answer · 2019-11-02 13:49:26Z

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

Collectives™ on Stack Overflow

upload image in codeigniter using ajax

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related