查看缩略图dome.html

最新推荐文章于 2021-07-08 13:48:59 发布

无法预知未来

最新推荐文章于 2021-07-08 13:48:59 发布

阅读量1.1k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/sinat_26987533/article/details/77996180

版权

HTML5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<HTML>
<HEAD>
	<META CHARSET="UTF-8"/>
	<TITLE></TITLE>
	<style>
	.highlight,.unhighlight{
			max-height:100px;
			max-width:100px;
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
			border-radius:5px;
			margin:10px;			
			}
		.highlight{border:5px solid #6f0;}
		.unhighlight{border:5px solid #000;}
	</style>
	
</HEAD>
<BODY>
	<h2> Select the images to preview.</h2>
	<div>
		<input type="file" id="input2" multiple="true" οnchange="handleFiles(this.files)"/>
		</div>
	<div id="imgPanel"></div>
	<div id="fileAttributes"></div>
	
<script src="js/jquery1.11.1.js"></script>	
<script>
		function handleFiles(f){
			var fileLimit = 10;
			var sizeLimit = 50000;//设置限制图片大小
			var imageType = /image.*/;
			var imgPanel = document.getElementById('imgPanel');
			imgPanel.innerHTML = '';
			var sizeLimitBytes = sizeLimit * 1024;
			
			if(f.length < fileLimit){
			for(var i =0;i<f.length;i++){
				var file = f[i];
				if(file.type.match(imageType)){
					if(file.size < sizeLimitBytes){
						var img = document.createElement('img');
						img.file = file;
						img.className ='unhighlight'; 
						img.addEventListener('mouseover',showFile,false);
						img.addEventListener('mouseout',clearFile,false);
						imgPanel.appendChild(img);
						
						var reader = new FileReader();
						reader.onload = (function(aImg){
							return function(e){
								aImg.src = e.target.result;								
								};							
							})(img);
							reader.readAsDataURL(file);
						}else{
							alert(file.name + '  '+'  is larger than ' + sizeLimit +' ' +'KB.');
							}					
						}else{
							alert(file.name +'  '+ 'is not a image.');
							}
				}
			}else{
							imgPanel.innerHTML = 'Only ' + fileLimit +'  '+ 'file can be selected at a time.';
						}
			}
		function showFile(){
			this.className = 'highlight';
			var fileAttributes = document.getElementById('fileAttributes');
			
			var file  =this.file;
			var fileinfo = 'File info:<br>';
			fileinfo += file.name + '<br>';
			fileinfo += file.type + '<br>';
			fileinfo += (file.size/1024).toFixed(2) + 'KB<br>';
			fileinfo += file.lastModifiedDate + '<br>';
			
			fileAttributes.innerHTML = fileinfo;
			}	
		function clearFile(){
			var fileAttributes = document.getElementById('fileAttributes');
			fileAttributes.innerHTML ='';
			this.className = 'unhighlight';
			}

</script>
</BODY>
</HTML>