image upload using Jquery Ajax and Codeigniter

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">
function showPreview(objFileInput) {
    if (objFileInput.files[0]) {
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
   $("#targetLayer").html('<img src="'+e.target.result+'" width="200px" height="200px" class="upload-preview" />');
   $("#targetLayer").css('opacity','0.7');
   $(".icon-choose-image").css('opacity','0.5');
        }
  fileReader.readAsDataURL(objFileInput.files[0]);
    }
}
</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>

Slug Generator Function : PHP

            function slugify($text) {
                // trim
                $text = trim($text);
                // replace non letter or digits by -
                $text = preg_replace('~[^\pL\d]+~u', '_', $text);

                // transliterate
                $text = iconv('utf-8', 'us-ascii//TRANSLIT', $text);

                // remove unwanted characters
                $text = preg_replace('~[^-\w]+~', '', $text);


                // remove duplicate -
               $text = preg_replace('~-+~', '_', $text);

                // lowercase
                $text = strtolower($text);

                return $text;
            }

Random password Generator Function : PHP

            function random_password($length = 8) {
                $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_-=+;:,.?";
                $password = substr(str_shuffle($chars), 0, $length);
                return $password;
            }