CodeIgniter Forums
How to print a image from a php function with AJAX? - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: How to print a image from a php function with AJAX? (/showthread.php?tid=49573)

How to print a image from a php function with AJAX? - El Forum - 02-25-2012

[eluser]DocFunky![/eluser]
Hi There,

I'm looking create an upload function in AJAX, but my image doesn't print even if I can see it in firebug lite with chrome, here is my code :

So first is the view :



Code:
[removed]
    
         $(document).ready(function() {
      
                $('#photoimg').live('change', function()   {
                  $("#preview").html('');
           $("#preview").html('<img src="&lt;?php echo base_url('images/loader.gif') ?&gt;" alt="Uploading...."/>');
       $("#imageform").ajaxForm({
          target: '#preview'
      }).submit();
      
       });
            });
    [removed]
    
    <div>
    &lt;?php echo $error;?&gt;
    
    &lt;?php
    $attributes = array('class' => 'email', 'id' => 'imageform');
    echo form_open_multipart('welcome/ajaxImage', $attributes);?&gt;
    
    &lt;input type="file" name="userfile" size="20" id="photoimg"/&gt;
    
    <br /><br />
    
    <div id='preview'>
    </div>
    
    
    </div>

Then here is the ajaxImage Controller : all I do is a resize, that seems to work :
Code:
public function ajaxImage(){

  $config['upload_path'] = './images/uploads';
  $config['allowed_types'] = 'gif|jpg|png';
  $config['max_size'] = '2048';
  echo "Bonjour</br>";
  $this->load->library('upload', $config);
  if ( ! $this->upload->do_upload())
  {
   echo "probleme ?";
   $error = array('error' => $this->upload->display_errors());

   $this->load->view('crea_mag', $error);
  }
  else
  {
   echo"good0</br>";
   $data = array('upload_data' => $this->upload->data());
  
   $path=$data['upload_data']['full_path'];
  
   echo "<pre>";
   print_r($data);
   echo "</pre>";
    echo $path.'</br>';
  
   if($data['upload_data']['image_width']>$data['upload_data']['image_height']){
  
    $config['image_library'] = 'gd2';
    $config['source_image'] = $path;
    $config['maintain_ratio'] = TRUE;
    $config['width']  = '250';
    $config['height'] = '360';
    $config['master_dim'] = 'height';
    
    $this->load->library('image_lib', $config);
    
    if ( ! $this->image_lib->resize())
     {
      echo $this->image_lib->display_errors();
     }else{
     echo "good1</br>";
    
    
   print "<img src='D:/Programmes/wamp/www/JE/images/uploads/Untitled8.jpg'  class='preview'>";
            }
        }
    }
and that's all, so all the prin_t and echo print correctly but for the image, I can't see it, but i see it in firegug light in a transparetn grey, like 'it doesn t print hehe'

Do you think any error in this MVC coded upload function?
It is coded with codeigniter, but I don't think the problem come from a badly used CI function, it is more like I don't know how to bring back my image, I'm a newbie with javascript and ajax

Thanks for your help Smile

How to print a image from a php function with AJAX? - El Forum - 02-25-2012

[eluser]CroNiX[/eluser]
Problem is in your javascript. You need to have a 'success' method that actually does something with the data you are returning. All you are doing is submitting the data. Anything returned is ignored.

How to print a image from a php function with AJAX? - El Forum - 02-25-2012

[eluser]InsiteFX[/eluser]
Code:
<div id="loading" class="center">
    &lt;?php echo '<img src="'.image_url().'loading/loading.gif" alt="" />'; ?&gt;
<br />Working please wait...
</div>

// css file
.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

#loading {
    background-color: white;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
    display: none;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    padding: 3px;
    z-index: 10001;
}

See the display:none in the css file loading id? remove the display:none then when finish put it back.




How to print a image from a php function with AJAX? - El Forum - 02-25-2012

[eluser]DocFunky![/eluser]
All right ! I made it !!

In fact, the problem was from my path : I used $path=$data['upload_data']['full_path'];
When I should have used $path='images/uploads/'.$data['upload_data']['file_name'];
Because it returned me something like D:/ that the browser doesnt understand.

But yet, I still have a problem with my crop function :
I put my question here :

http://ellislab.com/forums/viewthread/211875/

Thanks to you anyway Smile