JS获取图片的缩略图,并且动态的加载多张图片
时间：2014-04-28 08:56:56
收藏：0
阅读：737
找了好多资料也没有找到该死的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>
评论（0）