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获取图片的缩略图,并且动态的加载多张图片,码迷,mamicode.com

时间: 2024-12-26 13:43:10

JS获取图片的缩略图,并且动态的加载多张图片的相关文章

Silverlight项目笔记7:xml/json数据解析、MVVM下实现多级树形结构TreeView、忽视引用类型导致数据绑定错误、通过流或动态空间加载图片、虚拟目录设置、silverlight安全机制引发的问题、WebClient缓存问题

涉及的内容主要有: 1.xml/json数据解析 2.多级树形结构TreeView 3.忽视引用类型导致数据绑定错误 4.通过流或动态空间加载图片 5.虚拟目录设置 6.silverlight安全机制引发的问题 7.webclient缓存问题 1.xml/json数据解析 (1)xml数据解析 使用WebClient获取数据,获取到的数据实例化为一个XDocument,使用XDocument的Descendants(XName)方法获得对应节点的数据集合,再通过Element这个方法对数据集合进

esri-leaflet入门教程(5)- 动态要素加载

esri-leaflet入门教程(5)- 动态绘制图形 by 李远祥 在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚本只是非常简单的调用.但如果要做一列的地图交互操作或者动态渲染等,那就必须使用地图区域跳转.查询结果渲染.动态添加图形等多种交互手段.而这些交互手段基本上离不开一些非服务类型的数据加载,我们可以将其成为动态要素.动态要素一般是在页面端进行动态绘制的. 动态要素这一说法并不是ArcGIS 或者leaf

如何判断图片(img)是否已经加载成功--基于react

原文地址:http://andrewhfarmer.com/detect-image-load/ 我过去经常会问: 有没有一种方法去判断子类组件是否已经渲染完成? 答案当然是有的啦  componentDidMount(),在react component 已经渲染完成时 就会调用 componentDidMount()方法 如果你对  componentDidMount() 不太熟悉, 那么建议你去看看react组件的生命周期(React Component Lifecycle Methods

Bootstrap tab页的动态ajax加载

要实现这样的功能,点击tab导航ajax动态加载页面,当加载过之后,点击则不再重新加载,直接显示原来加载的页面. tab页面代码: <!-- Nav tabs --><ul class="nav nav-tabs" role="tablist" id="maintab">  <li class="active"><a href="#tab1"  onclick='s

实现LoaderCallbacks接口动态循环加载网上图片并展示在手机屏幕上 ...

1.布局xml文件 activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_pa

为网格布局图片打造的超炫 CSS 加载动画

今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Normalize.css 来替代传统的 CSS 复位: ZURB Foundation 创建具有响应式的网格: Masonry 创建一个动态的网格布局: imagesLoaded 检查是否已加载图像: Infinite Scroll加载更多图片并追加到画廊. 现在,让我们来看看一些实际的代码,这应该是大家

php动态滚动加载实例

内容涉及:php.分页.jquery.div+css 实例下载:http://download.csdn.net/detail/roro5119/7373905 index.php <? //数据库配置文件 include("conn.php"); //默认搜索 $page = $_GET["page"] ? $_GET["page"] : 1; $pagesize = 20; $pageval = ($page-1)*20; $sql=&

LABjs学习(一)之无阻塞动态并行加载脚本文件以及管理执行顺序

什么是LABjs LABjs是一个动态的脚本加载器,LABjs的定义特性是能够在浏览器允许的范围内以最快的速度并行加载所有JavaScript文件,但是如果文件之间存在依赖关系,则可以选择确保正确的执行顺序. 总计来说就是:动态并行加载脚本文件以及管理加载脚本文件的执行顺序 使用方法 $LAB对象替代了<script>标签,然后.script()方法表示加载Javascript文件,不带参数的.wait()方法表示立即运行刚才加载的Javascript文件,带参数的.wait()方法也是立即运

nginx php动态编译加载模块.

#Nginx动态编译加载模块步骤 #查看目前Nginx版本及编译模块 #[[email protected] ~]# /opt/app/lnmp/nginx-1.12.0/sbin/nginx -V #nginx version: nginx/1.12.0 #built by gcc 4.8.5 20150623 (Red Hat 4.8.5-11) (GCC) #built with OpenSSL 1.0.2k  26 Jan 2017 #TLS SNI support enabled #c