javascript - Javascript message not displaying

Question

I am trying to insert data into a database for a user's profile picture.The function is working properly but the issue is the message to notify the user is not displaying anything.I have attached the code below for the controler as i am using code igniter.

function fresherImageStore()  
{  
    if (isset($_FILES["image_file"]["name"]))  
    {  
        $user = $this->session->userdata('fresher_id');
        $config['upload_path'] = './uploads/fresherimages';  
        $config['allowed_types'] = 'jpg|jpeg|png|gif';  
        $this->load->library('upload', $config);  

        if (!$this->upload->do_upload('image_file'))  
        {  
            $error =  $this->upload->display_errors(); 
            echo json_encode(array('msg' => $error, 'success' => false));
        }  
        else 
        {  
            $user = $this->session->userdata('fresher_id');
            $data = array('upload_data' => $this->upload->data());
            $data1 = array(
                'user' => $user,
                'name' => $data['upload_data']['file_name']
            );  
            $query = $this->db->get_where('images',array('user'=>$user));

            if ($query->num_rows() > 0) {
                $this->db->set('name',$data['upload_data']['file_name'])
                    ->where('user',$user)
                    ->update('images');        
                $arr = array('msg' => 'Your image has been uploaded successfully', 'success' => true);
            }
            else
            {
                $this->db->insert('images',$data1);
                $getId = $this->db->insert_id();

                $arr = array('msg' => 'Image has not uploaded successfully', 'success' => false);

                if ($getId) {
                    $arr = array('msg' => 'Image has been uploaded successfully', 'success' => true);
                }
                echo json_encode($arr);
            }  
        }  
    }
} 

then this is the html

 <form method="POST" id="upload_form" enctype="multipart/form-data">  
 <div class="col-md-7">
   <h3> Upload your photo</h3></br>
    <div id="divMsg" class="alert alert-success" style="display: none">
     <span id="ms"></span>
    </div>
    <input type="file" name="image_file" multiple="true" accept="image/*" id="finput" onchange="readURL(this);"></br></br>
     <button class="btn btn-success">Submit</button>
 </div>
 <div class="col-md-5"></div>

and finally the jquery function

 $(document).ready(function(){  
  $('#upload_form').on('submit', function(e){  
       e.preventDefault();  
       if($('#image_file').val() == '')  
       {  
            alert("Please Select the File");  
       }  
       else 
       {  
            $.ajax({  
                 url:"<?php echo base_url(); ?>images/seekerImageStore",   
                 method:"POST",  
                 data:new FormData(this),  
                 contentType: false,  
                 cache: false,  
                 processData:false,  
                 dataType: "json",
                 success:function(res)  
                 {  

                    console.log(res.success);
                    if(res.success == true){
                     $('#blah').attr('src','//www.tutsmake.com/ajax-image-upload-with-preview-in-codeigniter/');   
                     $('#msg').html(res.msg1);   
                     $('#divMsg').show();   
                    }
                    else if(res.success == false){
                      $('#msg').html(res.msg); 
                      $('#divMsg').show(); 
                    }
                    setTimeout(function(){
                     $('#msg').html('');
                     $('#divMsg').hide(); 
                    }, 3000);
                 }  
            });  
       }  
  });  

标签： javascriptphpcodeigniter

Answer 1

Your jQuery code is trying to append the message on an element with id msg but the span tag where the message is supposed to go is called ms.

If you look in your browser's console, you'll see the error. You are pointing to a non-existing ID