zoukankan      html  css  js  c++  java
  • JS获取图片的缩略图,并且动态的加载多张图片

    找了好多资料也没有找到该死的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>
    

      

  • 相关阅读:
    [BJOI2019] 光线
    C# 从零开始写 SharpDx 应用 笔刷
    BAT 脚本判断当前系统是 x86 还是 x64 系统
    BAT 脚本判断当前系统是 x86 还是 x64 系统
    win2d 通过 CanvasActiveLayer 画出透明度和裁剪
    win2d 通过 CanvasActiveLayer 画出透明度和裁剪
    PowerShell 拿到显卡信息
    PowerShell 拿到显卡信息
    win10 uwp 如何使用DataTemplate
    win10 uwp 如何使用DataTemplate
  • 原文地址:https://www.cnblogs.com/andysd/p/3694625.html
Copyright © 2011-2022 走看看