How to put progress bar while file is uploading in Codeigniter

Question

I am uploading files to a server, my code is running perfectly but i want to show progress bar till the image is being uploaded, i have seen various tutorials in core php but i want to accomplish it in codeigniter framework. Below is my code:

<form name="posting_comment" id="posting_comment_<?=$row1['id']?>">
<input type="file" name="save_movie_<?=$row1['id']?>" id="movie_<?=$row1['id']?>" /> 
<input type="button" class="postbtn" id="submit_movie_<?=$row1['id']?>" value="Upload Video File" onclick = "return sendCareerData(<?=$row1['id']?>)"/>
</form>


<script type="text/javascript">
function sendCareerData(a)
{
  var data = new FormData(document.getElementById('posting_comment_'+a));
  data.append("file_m_id", a);

  $.ajax({
    type:"POST",
    url:"<?php echo site_url('Dashboard/do_upload');?>",
    data:data,
    mimeType: "multipart/form-data",
    contentType: false,
    cache: false,
    processData: false,
    success:function(data)
      {
         console.log(data);
      }
  });

}
</script>

Controller:

public function do_upload()
{  
  $lecture_id=$_POST['file_m_id'];
  $output_dir = "./uploads/";
  $fileName = $_FILES["save_movie_".$lecture_id]["name"];
  move_uploaded_file($_FILES["save_movie_".$lecture_id]["tmp_name"],$output_dir.$fileName);
}

Answer 1

Use this before your success function

 <script type="text/javascript">
function sendCareerData(a)
{
  var data = new FormData(document.getElementById('posting_comment_'+a));
  data.append("file_m_id", a);

  $.ajax({
    type:"POST",
    url:"<?php echo site_url('Dashboard/do_upload');?>",
    data:data,
    mimeType: "multipart/form-data",
    contentType: false,
    cache: false,
    processData: false,
    beforeSend: function() {    
            $("#loading").html('Please wait....');
            },
    success:function(data)
      {
         console.log(data);
      }
  });

}
</script>

and in your view add

 <div id="loading"></div>

Read this for more https://code.tutsplus.com/tutorials/how-to-upload-files-with-codeigniter-and-ajax--net-21684