title: upload image in codeigniter using ajax
body: <p><br/>
  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:<br/>
  This is in my controller:<br/>
  <code></p>
  
  <pre><code>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-&gt;load-&gt;library('upload', $config);
  
          $this-&gt;upload-&gt;do_upload('add_image');
          $data = $this-&gt;upload-&gt;data();
  
          $w = 720;
          $h = 425;
  
          $this-&gt;load-&gt;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-&gt;image_lib-&gt;initialize($config); 
          if($data['image_width']&lt;425 &amp;&amp; $data['image_height']&lt;425){
          }else{
              $this-&gt;image_lib-&gt;resize();
          }
          $file = $data['file_name'];
  
          echo json_encode(array("error"=&gt;false,"msg"=&gt;"success","file"=&gt;$file,"dir"=&gt;"image"));
      }catch(Exception $e) {
          echo json_encode(array("error"=&gt;true,"msg"=&gt;$e-&gt;getMessage()));
      }
  }
  </code></pre>
  
  <p><br/>
  This is in my model:<br/>
  <code></p>
  
  <pre>public function getShowcases(){
          $query = $this-&gt;db-&gt;query("SELECT * FROM showcase ORDER BY showcase_id DESC");
          $result = $query-&gt;result();
          return $result;
      }
  
      public function getImagesShowcase($idShowcase){
          $query = $this-&gt;db-&gt;query("SELECT * FROM showcase_gallery WHERE showcase_gallery_project_id='".$idShowcase."' AND showcase_gallery_type='image' ORDER BY showcase_gallery_index ASC");
          $result = $query-&gt;result();
          return $result;
      }
  </code></pre>
  
  <p>And on the view side I have some ajax:<br/>
  </p>
  
  <pre> function ajaxFileUploadImage(){
      $("#loading")
          .ajaxStart(function(){
              $(this).show();
          })
          .ajaxComplete(function(){
              $(this).hide();
          });
      $.ajaxFileUpload
      (
          {
              url:'&lt;?=site_url('ajaxadmin/showcase_image')?&gt;',
              secureuri:false,
              fileElementId:'add_image',
              dataType: 'json',
              data:{},
              success: function (data, status)
              {
                  //jQuery('.thumb_file').attr('src','&lt;?=base_url()?&gt;resources/media/our_work/thumb/'+data.file);
                  //jQuery('input[name=thumb]').val(data.file);
                  var image = ' \
                  &lt;div class="list" style="float:left;position:relative;margin-left:10px;margin-top:10px;"&gt; \
                      &lt;div class="description_img"&gt; \
                          &lt;div class="delete_img"&gt;&lt;/div&gt; \
                      &lt;/div&gt; \
                      &lt;img height="100" src="&lt;?=base_url()?&gt;resources/media/showcase/image/'+data.file+'" style="z-index: 0; position: relative;"/&gt; \
                      &lt;div class="move_arrows"&gt; \
                          &lt;div class="move_on_left"&gt;&lt;/div&gt; \
                          &lt;div class="move_on_right"&gt;&lt;/div&gt; \
                      &lt;/div&gt; \
                      &lt;input type="hidden" name="image_filename[]" class="image_filename" value="'+data.file+'"/&gt; \
                  &lt;/div&gt; \
                  ';
                  jQuery('#showcase_image').append(jQuery(image));
              },
              error: function (data, status, e){
                  jQuery('.response_mes').html('&lt;span class="red"&gt;* please try again later!&lt;/span&gt;');
              }
          }
      )
      return false;
  }
  </code></pre>
  
  <p><br/>
  I hope this code will be useful and maybe if someone has a soultion would be great.:D</p>