Image/File Upload Using Ajax

Image Upload HTML

This code shows photo icon in the middle of a preview box and an upload button. On clicking the photo icon a transparent preview of the image will be displayed in the preview box. Then, this image will be uploaded to a folder on clicking the upload button. It shows a window overlay with a loader to represent that the image upload is in progress.

<div class="form-group">
    <label>Logo</label>                               
    <?php $logo = isset($data['logo']) && $data['logo'] ? $data['logo'] : '' ?>
    <div id="uploadImageBox">
        <div id="targetLayer" style="position:relative;display: inline-block">
            <span class="remove_btn <?php echo $logo ? '' : 'hidden'; ?>" onclick="remove_image($(this))">&times;</span>
            <img src="<?php echo $logo ? base_url("assets/upload/customer/$logo") : base_url("assets/admin/img/no_image.jpg"); ?>" style="height:80px; width: 80px;" />
        </div>
        <input type="hidden" name="old_image" id="old_image" value="<?php echo $logo; ?>">
        <input type="hidden" name="remove_image" id="remove_image" value="">
        <div class="icon-choose-image" >
            <input name="userImage" id="userImage" type="file" class="inputFile" onChange="showPreview(this);" />
        </div>
    </div>
    <div class="error text-danger" id='logo_error'></div>
</div>

Uploading Image and Showing Preview using jQuery AJAX

This script contains a jQuery function showPreview(). It will be called when selecting the image file to be uploaded. This function is used to show a transparent preview of the selected image before upload.

<script type="text/javascript">
    var no_img = "<?php echo base_url("assets/admin/img/no_image.jpg"); ?>";
    function showPreview(objFileInput) {
        if (objFileInput.files[0]) {
            var fileReader = new FileReader();
            fileReader.onload = function (e) {
                $("#targetLayer").html('<img src="' + e.target.result + '" width="80px" height="80px" class="upload-preview" />');
                $("#targetLayer").css('opacity', '0.7');
                $(".icon-choose-image").css('opacity', '0.5');
                $("#targetLayer").append('<span class="remove_btn" onclick="remove_image($(this))">&times;</span>');
            }
            fileReader.readAsDataURL(objFileInput.files[0]);
        } else {
            $("#targetLayer").html('<img src="' + no_img + '" width="80px" height="80px" class="upload-preview" />');
        }
    }

    function remove_image(ele) {
        $('#userImage').val('');
        ele.closest('div').find('img').attr('src', no_img);
        ele.closest('#uploadImageBox').find('#remove_image').val(ele.closest('#uploadImageBox').find('#old_image').val());
        ele.closest('#uploadImageBox').find('#old_image').val('');
        ele.remove();
    }
</script>

 On clicking the upload button, it submits the form data to PHP via jQuery AJAX.In PHP code, it uploads the image to the target folder and returns the image HTML as an AJAX response. This AJAX response HTML will be added to the preview box.

<script type="text/javascript">
$(document).ready(function (e) {
 $("#uploadForm").on('submit',(function(e) {
  e.preventDefault();
  $.ajax({
         url: "upload.php",
   type: "POST",
   data:  new FormData(this),
   beforeSend: function(){$("#body-overlay").show();},
   contentType: false,
   processData:false,
   success: function(data){
           $("#targetLayer").html(data);
           $("#targetLayer").css('opacity','1');
           setInterval(function() {$("#body-overlay").hide(); },500);
   },
   error: function(){
   }          
  });
 }));
});
</script>

CSS

            .remove_btn{
                position: absolute;
                right: 0;
                height: 20px;
                width: 20px;
                background: red;
                text-align: center;
                color: #fff;
                font-size: 15px;
                font-weight: 700;
            }

Controller Code

//upload configuration
$upload_path = FCPATH . 'assets/upload/customer/';
$config['upload_path'] = $upload_path;
$config['allowed_types'] = 'gif|jpg|jpeg|png';
$config['max_size'] = 1024;
$this->load->library('upload', $config);
//upload file to directory
if (empty($_FILES['userImage']['name']) || $this->upload->do_upload('userImage')) {
    /*
     * insert file information into the database
     * .......
     */
    $uploadData = $this->upload->data();
    $logo = $uploadData['file_name'];
    $old_image = $this->input->post('old_image') ? $this->input->post('old_image') : '';
    $remove_image = $this->input->post('remove_image') ? $this->input->post('remove_image') : '';
    if ((!empty($logo) && file_exists($upload_path . $old_image)) || ($remove_image && file_exists($upload_path . $remove_image)) ) {
         $old_image  ? @unlink($upload_path.$old_image) : @unlink($upload_path.$remove_image);
    }
   //write hear any database code or anything you need...
} else {
    $result['status'] = 'validation';
    $result['logo'] = $this->upload->display_errors();
}