如何在 Codeigniter 中上传文件时放置进度条

Question

我正在将文件上传到服务器，我的代码运行良好，但我想在上传图像之前显示进度条，我在核心 php 中看到了各种教程，但我想在 codeigniter 框架中完成它。 以下是我的代码：

<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>

控制器：

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

在你的成功函数之前使用它

 <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>

在你看来添加

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

阅读本文了解更多https://code.tutsplus.com/tutorials/how-to-upload-files-with-codeigniter-and-ajax--net-21684