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

时间:2015-10-21 12:12:23

标签: php jquery codeigniter progress-bar codeigniter-2

我正在将文件上传到服务器,我的代码运行完美,但我想显示进度条直到图像上传,我已经在核心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);
}

1 个答案:

答案 0 :(得分: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