首页 > 代码库 > JS获取图片的缩略图,并且动态的加载多张图片

JS获取图片的缩略图,并且动态的加载多张图片

2024-07-01 21:10:57   230人阅读

找了好多资料也没有找到该死的ie的解决办法，最后放弃了ie

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js获取缩略图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.btn{

}
.addfiles{
	display: inline-block;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
	cursor:pointer;
	background-image: none;
	border:1px solid transparent;
	white-space: nowrap;
	padding:6px 12px;
	font-size:14px;
	line-height: 1.42857143;
	border-radius: 4px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	margin-bottom:5px;
	position: relative;
	overflow: hidden;
	color:#FFF;
	background-color: #5CB85C;
	border-collapse: #4CAE4C;
}

.addfiles:hover, .addfiles:focus, .addfiles:active{
	color:#FFF;
	background-color: #47A447;
	border-color:#398439;
	text-decoration: none;
}

.addfiles:active{
	outline:0;
	background-image: none;
	-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
	box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
}

.addfiles input{
	position: absolute;
	top:0;
	right:0;
	margin:0;
	opacity: 0;
	-ms-filter:‘alpha(opacity=0)‘;
	font-size: 200px;
	direction: ltr;
	cursor:pointer;
	display: block;
}

</style>
<script>
function change(v){
	if(window.navigator.userAgent.indexOf("MSIE")>=1){
		document.getElementById("img").setAttribute("src",v.value);
	}else{
		var imgs_div = document.getElementById("img_div");
		var imgs = "";
		for(var i=0;i<v.files.length;i++){
			imgs += ‘<img id="img_‘+i+‘">‘;
		}
		imgs_div.innerHTML = imgs;
		for(var i=0;i<v.files.length;i++){
			function a(){
				var img = document.getElementById("img_"+i);
				var file =v.files[i];  
				var reader = new FileReader();  
				reader.onload = function(e){
					img.setAttribute("src",e.target.result)
				}
				reader.readAsDataURL(file); 
			}
			a();
		}
	}
}
</script>
</head>
<body>

<span class="btn addfiles">
	<span>Add files...</span>
	<input id="file" type="file" name="files[]" onchange="change(this)" multiple/>
</span>
<div id="img_div">
	<img id="img" />
</div>
</body>
</html>

　　


联系
我们