• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    PHP大文件及断点续传下载实现代码

    一般来说浏览器要同时下载几个文件,比如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浏览器不支持。参考下面的例子。

    !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:

    引入头

    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对象

    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);
    });

    实现效果:

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

    您可能感兴趣的文章:
    • PHP大文件分割分片上传实现代码
    • php实现断点续传大文件示例代码
    • PHP下载大文件失败并限制下载速度的实例代码
    • PHP超低内存遍历目录文件和读取超大文件的方法
    • 详解PHP多个进程配合redis的有序集合实现大文件去重
    • PHP如何通过表单直接提交大文件详解
    • PHP大文件分片上传的实现方法
    • php下载远程大文件(获取远程文件大小)的实例
    • 详解PHP如何读取大文件
    上一篇:基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
    下一篇:PHP 8新特性简介
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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