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>
    

      

  • 相关阅读:
    如何使用谷歌的网页删除请求工具?
    已有记录表添加特定排序主键ID
    用ASP实现超长内容的word模板替换objDoc.Content.Find.Execute
    内网SMTP发送失败的曲线救国之策
    IIS无法在后台生成WORD文件的故障
    WINDOWS2003进行WindowsFTP设置的一些注意事项
    解决IISASP调用XmlHTTP出现msxml3.dll (0x80070005) 拒绝访问的错误
    [转]Cate:我是如何准备Google面试的
    Ubuntu的启动配置文件grub.cfg(menu.lst)设置指南
    Linux启动过程详解
  • 原文地址:https://www.cnblogs.com/andysd/p/3694625.html
Copyright © 2011-2022 走看看