PHP基于session.upload_progress 实现文件上传进度显示功能详解

session.upload_progress.enabled = On
session.upload_progress.cleanup = On
session.upload_progress.prefix = "upload_progress_"
session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS"
session.upload_progress.freq = "1%"
session.upload_progress.min_freq = "1"

upload_max_filesize = 500M; //上传文件的最大值，还可以调更大
post_max_size = 500M;    //post方式传递过来数据最大值，还可以调更大
max_execution_time = 1800; //页面最大执行时间，已经设置为最大值
max_input_time = 1800; //解析传入数据最大执行时间，已经设置为最大值
memory_limit = 128M;  //每个页面消耗的最大内存，已经设置为最大值

?php
if(isset($_FILES['demo'])){
  $tmp=explode(".",$_FILES['demo']['name']);
  $suffix_name = end($tmp);
  $name = time().".".$suffix_name;
  $path = __DIR__."\\".$name;
  move_uploaded_file($_FILES['demo']['tmp_name'],$path);
  echo "upload success";
}else{
  echo "error";
}

?php
session_start();
$key = ini_get("session.upload_progress.prefix") . $_GET["key"];
if (!empty($_SESSION[$key])) {
  $current = $_SESSION[$key]["bytes_processed"];
  $total = $_SESSION[$key]["content_length"];
  echo $current  $total ? ceil($current / $total * 100) : 100;
}else{
  echo 100;
}

!DOCTYPE html>
html lang="en">
head>
  meta charset="UTF-8">
  title>上传文件示例程序/title>
/head>
body>
div id="fileUpload">
  form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" target="hidden_iframe">
    p>
      input type="hidden" name="PHP_SESSION_UPLOAD_PROGRESS" value="file1" />
      input type="file" name="demo">
      input type="submit" value="上传">
    /p>
  /form>
/div>
iframe name="hidden_iframe" src="about:blank" style="display:none;">/iframe>
div id="process">
  上传进度：span id="percent">/span>
/div>
/body>
script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js">/script>
script>
  function fetch_progress(){
    $.get('progress.php',{"key":"file1"}, function(data){
      document.getElementById("percent").innerText = data+"%";
      if(data == 100){
        return;
      }else{
        setTimeout(fetch_progress,100);
      }
    });
  }
  $('#upload-form').submit(function(){
    setTimeout(fetch_progress,100);
  });
/script>
/html>

!DOCTYPE html>
html lang="en">
head>
  meta charset="UTF-8">
  title>上传文件示例程序/title>
  link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" >
  script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js">/script>
  script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js">/script>
/head>
body>
div style="width: 400px;margin-top: 30px;margin-left: 30px;">
  div id="fileUpload">
    form class="form-horizontal" role="form" id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" target="hidden_iframe">
      input type="hidden" name="PHP_SESSION_UPLOAD_PROGRESS" value="file1" />
      div class="form-group">
        div class="col-sm-8" style="margin-top: 7px;">
          input type="file" name="demo" >
        /div>
        div class="col-sm-4">
          button type="submit" class="btn btn-primary btn-sm">上传文件/button>
        /div>
      /div>
    /form>
  /div>
  iframe name="hidden_iframe" src="about:blank" style="display:none;">/iframe>
  div class="progress" style="display: none;">
    div id="percent" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
      0%
    /div>
  /div>
/div>
/body>
script>
  function fetch_progress(){
    $.get('progress.php',{"key":"file1"}, function(data){
      document.getElementById("percent").innerText = data+"%";
      document.getElementById("percent").setAttribute("style","width:"+data+"%;");
      document.getElementsByClassName("progress")[0].setAttribute("style","display: block;");
      if(data == 100){
        return;
      }else{
        setTimeout(fetch_progress,100);
      }
    });
  }
  $('#upload-form').submit(function(){
    setTimeout(fetch_progress,100);
  });
/script>
/html>