PHP大文件切割上传并带进度条功能示例

这篇文章主要介绍了PHP大文件切割上传并带进度条功能,结合实例形式分析了php大文件分割、上传及进度条显示相关操作技巧,需要的朋友可以参考下。

本文实例讲述了PHP大文件切割上传并带进度条功能,分享给大家供大家参考,具体如下:

前面一篇介绍了PHP大文件切割上传功能,这里再来进一步讲解PHP大文件切割上传并带进度条功能。

项目结构图:

PHP大文件切割上传并带进度条功能示例

14-slice-upload-fix.html文件:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>大文件切割上传带进度条</title>
  7. <link rel="stylesheet" href="">
  8. <script>
  9. var xhr = new XMLHttpRequest();//xhr对象
  10. var clock = null;
  11. function selfile(){
  12. clock = window.setInterval(sendfile,1000);
  13. }
  14. var sendfile = (function (){
  15. const LENGTH = 1024 * 1024 * 10;//每次上传的大小
  16. var start = 0;//每次上传的开始字节
  17. var end = start + LENGTH;//每次上传的结尾字节
  18. var sending = false;//表示是否正在上传
  19. var fd = null;//创建表单数据对象
  20. var blob = null;//二进制对象
  21. var percent = 0;
  22. return (function (){
  23. //如果有块正在上传,则不进行上传
  24. if(sending == true){
  25. return;
  26. }
  27. var file = document.getElementsByName('video')[0].files[0];//文件对象
  28. //如果sta>file.size,就结束了
  29. if(start > file.size){
  30. clearInterval(clock);
  31. return;
  32. }
  33. blob = file.slice(start,end);//根据长度截取每次需要上传的数据
  34. fd = new FormData();//每一次需要重新创建
  35. fd.append('video',blob);//添加数据到fd对象中
  36. up(fd);
  37. //重新设置开始和结尾
  38. start = end;
  39. end = start + LENGTH;
  40. sending = false;//上传完了
  41. //显示进度条
  42. percent = 100 * start/file.size;
  43. if(percent>100){
  44. percent = 100;
  45. }
  46. document.getElementById('bar').style.width = percent + '%';
  47. document.getElementById('bar').innerHTML = parseInt(percent)+'%';
  48. });
  49. })();
  50. function up(fd){
  51. xhr.open('POST','13-slice-upload.php',false);
  52. xhr.send(fd);
  53. }
  54. </script>
  55. <style>
  56. #progress{
  57. width:500px;
  58. height:30px;
  59. border:1px solid green;
  60. }
  61. #bar{
  62. width:0%;
  63. height:100%;
  64. background-color: green;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <h1>大文件切割上传带进度条</h1>
  70. <div >
  71. <div ></div>
  72. </div>
  73. <input type="file" name="video" onchange="selfile();" />
  74. </body>
  75. </html>

13-slice-upload.php文件:

  1. <?php
  2. /**
  3. * 大文件切割上传,把每次上传的数据合并成一个文件
  4. * @author webbc
  5. */
  6. $filename = './upload/upload.wmv';//确定上传的文件名
  7. //第一次上传时没有文件,就创建文件,此后上传只需要把数据追加到此文件中
  8. if(!file_exists($filename)){
  9. move_uploaded_file($_FILES['video']['tmp_name'],$filename);
  10. }else{
  11. file_put_contents($filename,file_get_contents($_FILES['video']['tmp_name']),FILE_APPEND);
  12. }
  13. ?>

运行结果图:

PHP大文件切割上传并带进度条功能示例