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>
JS获取图片的缩略图,并且动态的加载多张图片的更多相关文章
- JS获取图片的缩略图
js获取上传文件的缩略图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- JS获取图片实际宽高及根据图片大小进行自适应
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ad ...
- JS获取图片实际宽高
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...
- js点击获取—通过JS获取图片的相对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
- 如何在启用SharePoint浏览器功能的InfoPath 表单中添加托管代码以动态地加载并显示图片
InfoPath 的浏览器表单不支持加载并显示图片,当然在模板中可以插入图片,但是如果想显示数据库的一幅图片,或是动态加载一张图片就无能为力了. 基实这个问题可以通过在浏览器表单中使用: " ...
- esri-leaflet入门教程(5)- 动态要素加载
esri-leaflet入门教程(5)- 动态要素加载 by 李远祥 在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...
- Java_动态重新加载Class总结
在此记载Java动态重新加载Class的点点滴滴,实现之前也在网上看了很多文章,但发现不是很清晰,后来发现总结,看源码实现还是最靠谱. 直接上代码: package com.lkb.autoCode. ...
- 为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
- 实现LoaderCallbacks接口动态循环加载网上图片并展示在手机屏幕上 ...
1.布局xml文件 activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/re ...
随机推荐
- 关于各浏览器的cookie上限
IE6~IE6以下,每个域名最多20个cookie IE7及以上,每个域名最多50个cookie Firefox,每个域名最多50个cookie Opera,每个域名最多30个cookie Safar ...
- ElasticSearch 排序
1.相关性排序 ElasticSearch为了按照相关性来排序,需要将相关性表示为一个数值,在 Elasticsearch 中, 相关性得分 由一个浮点数进行表示,并在搜索结果中通过 _score 参 ...
- Mac OSX下编译安装PostgreSQL
原先使用的是官方提供的安装包,可是安装包会创建postgre这个用户.在登陆界面看的有点不爽,搜索了半天居然没有找到怎样在osx下编译安装的教程,并且假设是依照官方文档的编译安装办法一定会让你崩溃,本 ...
- MPTCP 源码分析(一) MPTCP的三次握手
简述: MPTCP依然按照正常的TCP进行三次握手,只是在握手过程中增加了MPTCP特有的信息. 建立过程 三次握手过程如下图所示: 左边客户端发送的第一个SYN包携带有客户端 ...
- dev_queue_xmit()函数返回值问题
函数 dev_queue_xmit()用于直接使用sk_buf发包,此函数有返回值,但是并不能通过 此函数返回值为0来说明包已经发送出去且可以立刻释放sk_buff内存.因为网卡发包是一个异步的过程 ...
- Shell 进度条效果的一个实现
#!/bin/bash processBar() { now=$ all=$ percent=`awk BEGIN'{printf "%f", ('$now'/'$all')}'` ...
- STL源代码剖析 容器 stl_list.h
本文为senlie原创.转载请保留此地址:http://blog.csdn.net/zhengsenlie list ----------------------------------------- ...
- select、poll、epoll之间的区别总结[整理](转)
select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作.但select ...
- 算法练习--ABCD*E=DCBA
//1.ABCD * E = DBCA//2.A,B,C,D {0-9} , E {1-9}//3.A,B,C,D,E all different var existSameN = function ...
- 【Excle】在重复数据中对日期排序并查询最新的一条记录
现在存在以下数据: 需要查询出以下数据 姓名 日期 张三 2017-12-14 李四 2017-12-16 在E1中写入以下公式:=IF(D2=MAX(IF($C$ ...