PHP大文件及斷點續傳下載實現代碼
一般來說瀏覽器要同時下載幾個文件，比如pdf文件，會在服務器端把幾個文件壓縮成一個文件。但是導致的問題就是會消耗服務器的cpu和io資源。
那有沒有辦法，用戶點了幾個文件，在客戶端同時下載呢？ 支持html5的瀏覽器是可以的，html的a標簽有一個屬性download
<a download='下載的1.pdf' href='http://www.b3g6.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='http://www.b3g6.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='http://www.b3g6.com/uploads/202010/09/16022067251.js'></script></head><body><a download='下載的1.pdf' href='http://www.b3g6.com/bcjs/1.pdf' rel='external nofollow' rel='external nofollow' >單個文件下載</a><br><a href='http://www.b3g6.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='http://www.b3g6.com/bcjs/js/down.css' rel='external nofollow' rel='Stylesheet'/><scripttype='text/javascript' src='http://www.b3g6.com/bcjs/js/jquery-1.4.min.js'></script><scripttype='text/javascript' src='http://www.b3g6.com/bcjs/js/down.app.js'charset='utf-8'></script><scripttype='text/javascript' src='http://www.b3g6.com/bcjs/js/down.edge.js'charset='utf-8'></script><scripttype='text/javascript' src='http://www.b3g6.com/bcjs/js/down.file.js'charset='utf-8'></script><scripttype='text/javascript' src='http://www.b3g6.com/bcjs/js/down.folder.js'charset='utf-8'></script><scripttype='text/javascript' src='http://www.b3g6.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);});
實現效果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備