PHP大文件及断点续传下载实现代码
一般来说浏览器要同时下载几个文件，比如pdf文件，会在服务器端把几个文件压缩成一个文件。但是导致的问题就是会消耗服务器的cpu和io资源。
那有没有办法，用户点了几个文件，在客户端同时下载呢？ 支持html5的浏览器是可以的，html的a标签有一个属性download
<a download='下载的1.pdf' href='https://www.haobala.com/bcjs/1.pdf' rel='external nofollow' rel='external nofollow' >单个文件下载</a>, 经过测试在edge浏览器，firefox和chrome都支持。但是遗憾的是ie浏览器不支持。参考下面的例子。
<!DOCTYPE html><html><head><meta charset='utf-8'><meta http-equiv='X-UA-Compatible' content='IE=Edge,chrome=1'><title></title><script src='https://www.haobala.com/uploads/202010/09/16022067251.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='https://www.haobala.com/uploads/202010/09/16022067251.js'></script></head><body><a download='下载的1.pdf' href='https://www.haobala.com/bcjs/1.pdf' rel='external nofollow' rel='external nofollow' >单个文件下载</a><br><a href='https://www.haobala.com/bcjs/7656.html#' 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：
引入头
<head><metahttp-equiv='Content-Type' content='text/html; charset=utf-8'/><title>donw2-多文件演示页面</title><linktype='text/css' href='https://www.haobala.com/bcjs/js/down.css' rel='external nofollow' rel='Stylesheet'/><scripttype='text/javascript' src='https://www.haobala.com/bcjs/js/jquery-1.4.min.js'></script><scripttype='text/javascript' src='https://www.haobala.com/bcjs/js/down.app.js'charset='utf-8'></script><scripttype='text/javascript' src='https://www.haobala.com/bcjs/js/down.edge.js'charset='utf-8'></script><scripttype='text/javascript' src='https://www.haobala.com/bcjs/js/down.file.js'charset='utf-8'></script><scripttype='text/javascript' src='https://www.haobala.com/bcjs/js/down.folder.js'charset='utf-8'></script><scripttype='text/javascript' src='https://www.haobala.com/bcjs/js/down.js'charset='utf-8'></script></head>
创建down2对象
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
$('#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);});
当成一个文件夹下载
$('#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);});
下载多级目录
$('#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);});
自定义下载文件名称
$('#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);});
实现效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
网公网安备