VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > PHP >

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

这篇文章主要介绍了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 id="progress"> 
  71.     <div id="bar"></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大文件切割 PHP进度条

 


出处：http://www.phpfensi.com/php/20211129/18895.html
 


相关教程