Himanshu Goyal Himanshu Goyal -4 years ago 48
HTML Question

I am uploading image with the help of ajax and also showing it in a div but it wont show the image for the first time image is uploaded in php

I am uploading images with the help ajax and also showing it.now what I wanted to achieve was that as soon as user select the image it should be visible in the div but when I try to upload the image for the first time when database is empty it shows me nothing the ajax is running data is being saved into the database but I can't see the image can you tell me what am I doing wrong here?

<div id="timelineBackground" class="">
<?php

{
if(!$timeline_image=="")
{
$image_properties = array('src' => base_url("uploads/".$timeline_image),'width' => '900px','height'=> '400px','id'=>'coverimg', 'title' => 'That was quite a night','rel' => 'lightbox');
echo img($image_properties);
}else{
$timeline_image = array(
'src' => base_url("assets/img/Facebook-cover.jpg"),
'width' => '900px',
'height'=> '400px',

);

echo img($timeline_image);
}
?>
<div id="timelineselector" class="grow">
<?php echo form_open_multipart('',["id"=>"form_cover"]); ?>
<input type="hidden" name="id" value="<?php echo $id ;?>">
<label class="icons-camera " for="timelineimage">
<p class="cover_upload"> <i class="fa fa-camera cover_upload" style="color:white;">&nbsp;Upload Your Cover</p></i>

</label>
<?php echo form_upload(["name"=>"timelineimage","id"=>"timelineimage" ]); ?>
<?php echo form_close(); ?>
</div>
<?php
}
?>
</div>

Jquery code


jQuery('#timelineimage').on('change',function(e) {
e.preventDefault();
var form=jQuery('#form_cover')[0];
var formData = new FormData(form);
var url = '<?php echo base_url("user/coverimage"); ?>';
formData.value
jQuery.ajax({
type: "POST",
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data) {

console.log(data);
$('#coverimg').attr('src', data);
},
error: function(data) {
//error function
}
});
});

Here is my code so what should I do when the first time database is empty?

here is my controller

public function coverimage()
{
$config = [
'upload_path' => './uploads/',
'allowed_types' => 'jpg|gif|png|jpeg',
'max_size' => 10000000000000,
'max_width' => 1024000000,
'max_height' => 7680000000,
];
$this->load->library('upload', $config);
$this->upload->initialize($config);
$timelineimage="timelineimage";
if(!$this->upload->do_upload($timelineimage))
{
$upload_error = $this->upload->display_errors();
$this->load->view('dashboard/profile',compact('upload_error'));
}
else
{
$post = $this->input->post();
unset($post['submit']);
$upload_data = $this->upload->data();
$file_name=$_FILES['timelineimage'];
$this->load->model('Pmodel');
$this->Pmodel->timeline_upload_model($post,$file_name);

echo $image_path= base_url("uploads/".$upload_data['raw_name'].$upload_data['file_ext']);
}

}
public function timeline_upload_model($arr,$arra)
{

$id=$arr['id'];
$image=$arra['name'];

$data=array('timelineimage'=>$image,'user_id'=>$id);

$query=$this->db->where('id',$id)->update('user_data',$data);
//print_r($query);
return $query;
}
now let me show you what is the problem
[![First Image][1]][1]
[![Second Image][2]][2]
[![Third Image][3]][3]



[1]: https://i.stack.imgur.com/C2Rvu.png
[2]: https://i.stack.imgur.com/4fYXJ.png
[3]: https://i.stack.imgur.com/DG4NH.png

Answer Source

You have missed the id for image tag in else part.

if(!$timeline_image=="")
    {
        $image_properties = array('src' => base_url("uploads/".$timeline_image),'width' => '900px','height'=> '400px','id'=>'coverimg', 'title' => 'That was quite a night','rel'   => 'lightbox');
        echo img($image_properties);
    }else{
        $timeline_image = array(
            'src'   => base_url("assets/img/Facebook-cover.jpg"),
            'width' => '900px',
            'height'=> '400px',
            'id'=>'coverimg',
        );
        echo img($timeline_image);
    }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download