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=\"https://zxbcw.cn/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://zxbcw.cn/uploads/202010/09/16022067251.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大文件及断点续传下载实现代码