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

PHP大文件及断点续传下载实现代码

发布:smiling　来源: PHP粉丝网 　添加日期：2022-03-22 09:29:56　浏览: 评论：0　

一般来说浏览器要同时下载几个文件，比如pdf文件，会在服务器端把几个文件压缩成一个文件，但是导致的问题就是会消耗服务器的cpu和io资源。

那有没有办法，用户点了几个文件，在客户端同时下载呢？ 支持html5的浏览器是可以的，html的a标签有一个属性download

<a download="下载的1.pdf" href="1.pdf" rel="external nofollow" rel="external nofollow" >单个文件下载</a>, 经过测试在edge浏览器，firefox和chrome都支持。但是遗憾的是ie浏览器不支持。参考下面的例子。

  1. <!DOCTYPE html> 
  2.  
  3. <html> 
  4.  
  5. <head> 
  6.  
  7.     <meta charset="utf-8"> 
  8.  
  9.     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 
  10.  
  11.     <title></title> 
  12.  
  13.     <script src="//libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> 
  14.  
  15. </head> 
  16.  
  17. <body> 
  18.  
  19.     <input type="button" class="downloadAll" 
  20.     value="批量下载" /> 
  21.  
  22.     <script> 
  23.         var filesForDownload = []; 
  24.         filesForDownload[filesForDownload.length] = { 
  25.             path: "1.zip", //要下载的文件路径 
  26.             name: "file1.txt" //下载后要显示的名称 
  27.         }; 
  28.         filesForDownload[filesForDownload.length] = { 
  29.             path: "2.zip", 
  30.             name: "file2.txt" 
  31.         }; 
  32.         filesForDownload[filesForDownload.length] = { 
  33.             path: "3.zip", 
  34.             name: "file3.txt" 
  35.         }; 
  36.  
  37.         function download(obj) { 
  38.             var temporaryDownloadLink = 
  39.                 document.createElement("a"); 
  40.             temporaryDownloadLink.style.display = 
  41.                 'none'; 
  42.             document.body.appendChild( 
  43.                 temporaryDownloadLink); 
  44.             temporaryDownloadLink.setAttribute( 
  45.                 'href', obj.path); 
  46.             temporaryDownloadLink.setAttribute( 
  47.                 'download', obj.name); 
  48.             temporaryDownloadLink.click(); 
  49.             document.body.removeChild( 
  50.                 temporaryDownloadLink); 
  51.         } 
  52.         $('input.downloadAll').click(function( 
  53.             e) { 
  54.             e.preventDefault(); 
  55.             for (var x in filesForDownload) { 
  56.                 download(filesForDownload[x]); 
  57.             } 
  58.         }); 
  59.     </script> 
  60.  
  61. </body> 
  62.  
  63. </html> 

ie浏览器怎么办呢？ 也可以用window.open函数。

  1. <!DOCTYPE html> 
  2.  
  3. <html> 
  4.  
  5. <head> 
  6.  
  7.     <meta charset="utf-8"> 
  8.  
  9.     <title></title> 
  10.  
  11.     <script src="//libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> 
  12.  
  13. </head> 
  14.  
  15. <body> 
  16.  
  17.     <a download="下载的1.pdf" href="1.pdf" rel="external nofollow" rel="external nofollow" >单个文件下载</a> 
  18.     <br> 
  19.  
  20.     <a href="#" rel="external nofollow" class="yourlink">下载全部文件</a> 
  21.  
  22.     <script> 
  23.         $('a.yourlink').click(function(e) { 
  24.             e.preventDefault(); 
  25.             window.open('1.zip', 'download'); 
  26.             window.open('2.zip', 'download'); 
  27.             window.open('3.zip', 'download'); 
  28.         }); 
  29.     </script> 
  30. </body> 
  31. </html> 

完整的方案就是根据浏览器类型，调用不同的函数，实现。

另外要下载pdf，而不是在浏览器中打开的话，需要配置apache的配置文件，在httpd.conf中增加下面的配置。

  1. <FilesMatch "\.pdf$"> 
  2.  
  3. Header set Content-Disposition attachment 
  4.  
  5. </FilesMatch> 

或者使用down2组件，下载更简单。

JavaScript：

引入头

  1. <head> 
  2.  
  3.     <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" 
  4.     /> 
  5.  
  6.     <title>donw2-多文件演示页面</title> 
  7.  
  8.     <linktype="text/css" href="js/down.css" rel="external nofollow" rel="Stylesheet" 
  9.     /> 
  10.  
  11.     <scripttype="text/javascript" src="js/jquery-1.4.min.js"> 
  12.         </script> 
  13.  
  14.         <scripttype="text/javascript" src="js/down.app.js" 
  15.         charset="utf-8"> 
  16.             </script> 
  17.  
  18.             <scripttype="text/javascript" src="js/down.edge.js" 
  19.             charset="utf-8"> 
  20.                 </script> 
  21.  
  22.                 <scripttype="text/javascript" src="js/down.file.js" 
  23.                 charset="utf-8"> 
  24.                     </script> 
  25.  
  26.                     <scripttype="text/javascript" src="js/down.folder.js" 
  27.                     charset="utf-8"> 
  28.                         </script> 
  29.  
  30.                         <scripttype="text/javascript" src="js/down.js" 
  31.                         charset="utf-8"> 
  32.                             </script> 
  33.  
  34. </head> 

创建down2对象

  1. var downer = new DownloaderMgr(); 
  2. downer.Config["Folder"] = ""; //设置默认下载路径。 
  3. //挂载事件 
  4. downer.event.taskCreate = function(obj) { 
  5.     $(document.body).append("文件ID：" + obj 
  6.         .fileSvr.id) + "<br/>"; 
  7. }; 
  8. downer.event.downProcess = function(obj) {}; 
  9. downer.event.downStoped = function(obj) {}; 
  10. downer.event.downComplete = function( 
  11.     obj) { 
  12.     $(document.body).append('<div>本地路径：' + 
  13.         obj.fileSvr.pathLoc + '</div>'); 
  14. }; 
  15. downer.event.downError = function(obj, 
  16.     err) {}; 
  17. downer.event.queueComplete = function() { 
  18.     $(document.body).append( 
  19.         "<div>队列完成</div>"); 
  20. }; 

批量下载url

  1. $("#btn-down-files").click(function() { 
  2.     if (downer.Config["Folder"] == "") { 
  3.         downer.open_folder(); 
  4.         return; 
  5.     } 
  6.     var urls = [ 
  7.         { 
  8.             fileUrl: "http://res2.ncmem.com/res/images/ie11.png" 
  9.         } 
  10.         , { 
  11.             fileUrl: "http://res2.ncmem.com/res/images/up6.1/down.png" 
  12.         } 
  13.         , { 
  14.             fileUrl: "http://res2.ncmem.com/res/images/firefox.png" 
  15.         } 
  16.         , { 
  17.             fileUrl: "http://res2.ncmem.com/res/images/edge.png" 
  18.         } 
  19.         , { 
  20.             fileUrl: "http://res2.ncmem.com/res/images/up6.1/cloud.png" 
  21.         } 
  22.         , { 
  23.             fileUrl: "http://res2.ncmem.com/res/images/home/w.png" 
  24.         } 
  25.         , { 
  26.             fileUrl: "http://res2.ncmem.com/res/images/img.png" 
  27.         } 
  28.     ]; 
  29.     downer.app.addUrls(urls); 
  30. }); 

当成一个文件夹下载

  1. $("#btn-down-json").click(function() { 
  2.     if (downer.Config["Folder"] == "") { 
  3.         downer.open_folder(); 
  4.         return; 
  5.     } 
  6.     var fd = { 
  7.         nameLoc: "图片列表" 
  8.         , 
  9.         files: [ 
  10.             { 
  11.                 fileUrl: "http://res2.ncmem.com/res/images/ie11.png" 
  12.             } 
  13.             , { 
  14.                 fileUrl: "http://res2.ncmem.com/res/images/up6.1/down.png" 
  15.             } 
  16.             , { 
  17.                 fileUrl: "http://res2.ncmem.com/res/images/firefox.png" 
  18.             } 
  19.             , { 
  20.                 fileUrl: "http://res2.ncmem.com/res/images/edge.png" 
  21.             } 
  22.             , { 
  23.                 fileUrl: "http://res2.ncmem.com/res/images/up6.1/cloud.png" 
  24.             } 
  25.             , { 
  26.                 fileUrl: "http://res2.ncmem.com/res/images/home/w.png" 
  27.             } 
  28.             , { 
  29.                 fileUrl: "http://res2.ncmem.com/res/images/img.png" 
  30.             } 
  31.         ] 
  32.     }; 
  33.     downer.app.addJson(fd); 
  34. }); 

下载多级目录

  1. $("#btn-down-fd").click(function() { 
  2.     if (downer.Config["Folder"] == "") { 
  3.         downer.open_folder(); 
  4.         return; 
  5.     } 
  6.     var fd = { 
  7.         nameLoc: "测试文件夹" 
  8.         , 
  9.         files: [ 
  10.             { 
  11.                 fileUrl: "http://www.ncmem.com/images/ico-ftp.jpg" 
  12.             } 
  13.             , { 
  14.                 fileUrl: "http://www.ncmem.com/images/ico-up.jpg" 
  15.             } 
  16.         ] 
  17.         , 
  18.         folders: [ 
  19.             { 
  20.                 nameLoc: "图片1" 
  21.                 , 
  22.                 files: [ 
  23.                     { 
  24.                         fileUrl: "http://www.ncmem.com/images/ico-ftp.jpg" 
  25.                     } 
  26.                     , { 
  27.                         fileUrl: "http://www.ncmem.com/images/ico-up.jpg" 
  28.                     } 
  29.                     , { 
  30.                         fileUrl: "http://www.ncmem.com/images/ico-capture.jpg" 
  31.                     } 
  32.                     , { 
  33.                         fileUrl: "http://www.ncmem.com/images/ico-imageuploader.gif" 
  34.                     } 
  35.                     , { 
  36.                         fileUrl: "http://www.ncmem.com/images/ico-wordpaster.gif" 
  37.                     } 
  38.                 ] 
  39.                 , 
  40.                 folders: [ 
  41.                     { 
  42.                         nameLoc: "软件" 
  43.                         , 
  44.                         files: [ 
  45.                             { 
  46.                                 fileUrl: "http://res2.ncmem.com/res/images/edit-file.png" 
  47.                             } 
  48.                         ] 
  49.                     } 
  50.                 ] 
  51.             } 
  52.         ] 
  53.     }; 
  54.     downer.app.addJson(fd); 
  55. }); 

自定义下载文件名称

  1. $("#btn-down-svr").click(function () { 
  2.   if (downer.Config["Folder"] == "") { downer.open_folder(); return; } 
  3.   var urls = [ 
  4.     { fileUrl: "http://localhost:90/db/down.aspx", nameLoc: "test.exe" } 
  5.     , { fileUrl: "http://localhost:90/db/down.aspx", nameLoc: "test-1.exe" } 
  6.   ]; 
  7.   downer.app.addUrls(urls); 
  8. }); 

实现效果：

PHP大文件及断点续传下载实现代码

Tags: PHP大文件断点续传

分享到：

相关文章

推荐文章

热门文章

最新评论文章