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>
    

      

  • 相关阅读:
    浅谈 C++ 多态性
    浅谈 C++ 继承
    C++ 深拷贝浅拷贝
    C++ 斐波那契数列
    C++ 指针函数和lambda
    设计模式之单例模式
    结构体中内存对齐和补齐
    AWS S3文件存储工具类
    Java Springboot学习(三) Thymeleaf 、mybatis-plus
    Java Springboot学习(三) 整合springmvc、jdbc、mybatis
  • 原文地址:https://www.cnblogs.com/andysd/p/3694625.html
Copyright © 2011-2022 走看看