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

吾爱主题阅读：145 2021-10-22 14:27:00 评论：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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 <!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <meta http-equiv= "X-UA-Compatible" content= "IE=Edge,chrome=1" > <title></title> <script src= "//libs.baidu.com/jquery/1.11.1/jquery.min.js" ></script> </head> <body> <input type= "button" class= "downloadAll" value= "批量下载" /> <script> var filesForDownload = []; filesForDownload[filesForDownload.length] = { path: "1.zip" , //要下载的文件路径 name: "file1.txt" //下载后要显示的名称 }; filesForDownload[filesForDownload.length] = { path: "2.zip" , name: "file2.txt" }; filesForDownload[filesForDownload.length] = { path: "3.zip" , name: "file3.txt" }; function download(obj) { var temporaryDownloadLink = document.createElement( "a" ); temporaryDownloadLink.style.display = 'none' ; document.body.appendChild( temporaryDownloadLink); temporaryDownloadLink.setAttribute( 'href' , obj.path); temporaryDownloadLink.setAttribute( 'download' , obj.name); temporaryDownloadLink.click(); document.body.removeChild( temporaryDownloadLink); } $( 'input.downloadAll' ).click( function ( e) { e.preventDefault(); for ( var x in filesForDownload) { download(filesForDownload[x]); } }); </script> </body> </html> ie浏览器怎么办呢？也可以用window.open函数。 <!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title></title> <script src= "//libs.baidu.com/jquery/1.11.1/jquery.min.js" ></script> </head> <body> <a download= "下载的1.pdf" href= "1.pdf" rel= "external nofollow" rel= "external nofollow" >单个文件下载</a> <br> <a href= "#" rel= "external nofollow" class= "yourlink" >下载全部文件</a> <script> $( 'a.yourlink' ).click( function (e) { e.preventDefault(); window.open( '1.zip' , 'download' ); window.open( '2.zip' , 'download' ); window.open( '3.zip' , 'download' ); }); </script> </body> </html>

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

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

<FilesMatch "\.pdf$">

Header set Content-Disposition attachment

</FilesMatch>

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

JavaScript：

引入头

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

创建down2对象

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

批量下载url

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

当成一个文件夹下载

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

下载多级目录

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

自定义下载文件名称

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

实现效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。

原文链接：https://www.cnblogs.com/songsu/p/13293077.html

可以去百度分享获取分享代码输入这里。

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。