How to put progress bar while file is uploading in Codeigniter - php

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