文件开始上传，创建session，上传过程中，session文件中保存了以上传字节数和总字节数，可以以及计算得到上传文件百分比，在上传完成之后，该session会被销毁。
bootstrap样式的进度条
index.html加上bootstrap的进度条样式，顿时高大上多了，哈哈
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传文件示例程序</title> <link href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" > <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div> <div> <form role="form" action="upload.php" method="post" enctype="multipart/form-data" target="hidden_iframe"> <input type="hidden" value="file1" /> <div> <div> <input type="file" > </div> <div> <button type="submit">上传文件</button> </div> </div> </form> </div> <iframe src="https://www.jb51.net/about:blank"></iframe> <div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> 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>
显示效果
参考文档：
//www.jb51.net/article/56305.htm
更多关于PHP相关内容感兴趣的读者可查看本站专题：《php缓存技术总结》、《PHP数组(Array)操作技巧大全》、《php字符串(string)用法总结》、《PHP错误与异常处理方法总结》、《php面向对象程序设计入门教程》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》