当前位置:首页 > PHP教程 > php上传下载 > 列表

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

发布:smiling 来源: PHP粉丝网  添加日期:2021-11-29 11:28:54 浏览: 评论:0 

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

运行结果图:

PHP大文件切割 PHP进度条

Tags: PHP大文件切割 PHP进度条

分享到: