在codeigniter中选择文件名后显示图像

Question

Controller:

public function do_register()
{
    $path = $_FILES['image']['name'];
    $imgext=strtolower(strrchr($path,'.'));
    $imgname= $this->generateRandomString().$imgext;
    if($path!='')
    {
        $im= $this->config->item('base_url').'/uploads'.'/'.$imgname;
        $x=$this->do_upload($imgname);
        $data['img']=$im;
    }

    $this->search_model->register_user($data);
    $this->load->view('register_view');  
}

function generateRandomString()
{
    $characters = '0123456789abcdefghijklmnopqrstuvwxyz';
    $randomString = '';
    for ($i = 0; $i < 8; $i++)
    {
        $randomString .= $characters[rand(0, strlen($characters) - 1)];
    }
    return $randomString;
}

function do_upload($img)
{
    $config['upload_path'] = './uploads/';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size'] = '575000';
    $config['file_name'] = $img;
    $this->load->library('upload',$config);
    if ( ! $this->upload->do_upload('image'))
    {
        $error = array('error' => $this->upload->display_errors());
    }
    else
    {
        $data = array('upload_data' => $this->upload->data());
        return $data;
    }
    return;
}

This is the controller for image upload.When i select the image foe uploading the image is not displayed while i selecting the filename? what is the solution for this? How to display the image after selecting the filename? Please provide a code for this?

Answer 1

For Image preview before uploading check this FIDDLE.

Code for limiting your upload size.

  $(document).on('change','.coverimage',function(){
      files = this.files;
      size = files[0].size;
      //max size 50kb => 50*1000
      if( size > 1000141){
         alert('Please upload less than 1mb file');
         return false;
      }
      return true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" method="post" enctype="multipart/form-data">
   <div class="form-group">
      <label for="file">Choose your Image: </label>
      <input type="file"  class="coverimage" id="file1" name="file[]" multiple>
   </div>
   <button id='submit_btn' class="btn btn-default">upload</button>
</form>

</div>