使用最近浏览器批量下载有序图片

最新推荐文章于 2024-06-02 13:01:04 发布

博唯

最新推荐文章于 2024-06-02 13:01:04 发布

阅读量1.6k

点赞数

分类专栏： Front-end 文章标签： javascript browser function microsoft download callback

本文链接：https://blog.csdn.net/flashdelover/article/details/7966833

版权

Front-end 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

有序图片批量下载程序

代替迷你迅雷的批量下载（要不是迅雷批量下载图片太慢，我才懒得花时间做这东西）

用法：

1.打开这些HTML写的下载页面，按提示输入URL，点击下载

2.按F12打开控制台可以查看进度，下载进度完成后Ctrl+S将网页保存(保存所有)

3.打开保存的目录下将那个xxx_files重命名为xxx（对话框提示选确定），删掉xxx.html

打开xxx目录，图片就在这里了，OK大功告成

兼容要求：

支持HTML5

说明：

1.菜鸟慎用

2.这东东不要太张扬，被站长发现就不好使了

3.希望用在好处，保持优秀品德

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>pages</title>
<style type="text/css">
body,p,form,h1,h2,h3{
	margin:0px;
}
body{
	background-color:#fafafa;
	font:12px/1.5 Arial,"Microsoft YaHei";
}
.panel{
	margin:60px auto;
	width:500px;
	height:400px;
	background-color:#ffffff;
	border:2px dashed #999999;
	border-radius:10px;
}
.panel h1{
	font:16px/32px Arial,"Microsoft YaHei";
	text-indent:1em;
	background-color:#ffffff;
	border-bottom:2px dashed #999999;
	border-radius:10px 10px 0px 0px;
}
.panel .pane{
	padding:10px;
}
#url{
	width:400px;
}
#urls{
	width:400px;
}
#imgs img{
	float:left;
	max-width:512px;
	margin-left:10px;
	margin-top:10px;
}
.eg{
	color:#c0c0c0;
}
</style>
</head>

<body>

<div class="panel">
	<h1>Downloading Ordered Images</h1>
	<div class="pane">
		<form id="form" action="/" οnsubmit="try{downloadImages()}catch(err){} return false;"
				οnreset="try{clearImages()}catch(err){}return false;">
			<label for="url">Get images by url</label>
			<label class="eg">e.g. http://www.hfqun.com/zazhi/07/pages/page-(*).jpg</label>
			<input type="text" id="url" name="url" value="" pattern=".+(\(\*\)).*" /><br />
			<label for="index0">From</label>
			<input type="number" id="index0" name="index0" value="1" min="0" max="999" size="3" />
			<label for="index1">to</label>
			<input type="number" id="index1" name="index1" value="1" min="0" max="999" size="3" />
			match length
			<input type="number" id="numlength" name="numlength" value="3" min="1" max="3" size="3" /><br />
			<input type="submit" value="Download" />
			<input type="reset" value="Clear Images" />
			<br />
			<select name="urls" id="urls" size="10"></select>
		</form>
	</div>
</div>
<div id="imgs">

</div>

<script type="text/javascript">
var $=function(s){
	return document.querySelector(s);
};
var p0=function(n,p){
	if(p==1){
		return ""+n;
	}else if(p==2){
		return n<10?"0"+n:""+n;
	}else if(p==3){
		return n<10?"00"+n:n<100?"0"+n:""+n;
	}else{
		return ""+n;
	}
};

function getURLs(){
	var url=$("#url").value,
		index0=parseInt($("#index0").value),
		index1=parseInt($("#index1").value),
		numlength=parseInt($("#numlength").value);
	try{
		if(!$("#form").checkValidity()){
			return [];
		}
	}catch(err){}
	if(url.indexOf("(*)")==-1){
		return [];
	}
	var urlslices=url.split("(*)");
	var urls=[];
	for(var i=index0;i<=index1;i++){
		var slices=urlslices.slice(0);
		slices.splice(1,0,p0(i,numlength));
		urls.push(slices.join(""));
	}
	return urls;
}
function previewURLs(){
	var urls=getURLs();
	var urlList=$("#urls");
	urlList.options.length=0;
	for(var i=0;i<urls.length;i++){
		urlList.options.add(new Option(urls[i],i));
	}
}

var taskinfo={total:0,success:0,error:0};
var progress_interval=null;
var progress_delay=1000;

function resetTaskinfo(){
	taskinfo.total=0;
	taskinfo.success=0;
	taskinfo.error=0;
}
function load_callback(event){
	taskinfo.success++;
	console.log("[load]",event.target.alt);
}
function error_callback(event){
	taskinfo.error++;
	console.log("[error]",event.target.alt);
}
function refreshProgress(){
	var complete=taskinfo.success+taskinfo.error;
	if(complete==taskinfo.total){
		var errormsg=taskinfo.error>0?"; "+taskinfo.error+" error occurred.":""
		console.log("download complete! "+errormsg);
		clearInterval(progress_interval);
	}
}

function downloadImages(){
	var urls=getURLs();
	if(urls.length==0){return false;}
	console.log("start download "+urls.length+" images");
	resetTaskinfo();
	taskinfo.total=urls.length;
	clearInterval(progress_interval);
	progress_interval=setInterval(refreshProgress,progress_delay);
	var imageContainer=$("#imgs");
	for(var i=0;i<urls.length;i++){
		var url=urls[i],
			filename=url.substr(url.lastIndexOf("/")+1);
		var img=document.createElement("img");
		img.οnlοad=load_callback;
		img.οnerrοr=error_callback;
		img.alt=filename;
		img.src=urls[i];
		imageContainer.appendChild(img);
	}
	return false;
}
function clearImages(){
	var imageContainer=$("#imgs");
	imageContainer.innerHTML="";
}

window.οnlοad=function(){
	$("#index1").οnchange=$("#index0").οnchange=$("#numlength").οnchange=previewURLs;
	previewURLs();
}
</script>

</body>
</html>

博唯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用最近浏览器批量下载有序图片

有序图片批量下载程序代替迷你迅雷的批量下载（要不是迅雷批量下载图片太慢，我才懒得花时间做这东西）用法：1.打开这些HTML写的下载页面，按提示输入URL，点击下载2.按F12打开控制台可以查看进度，下载进度完成后Ctrl+S将网页保存(保存所有)3.打开保存的目录下将那个xxx_files重命名为xxx（对话框提示选确定），删掉xxx.html打开xxx目录，图片
复制链接

扫一扫