找了好多资料也没有找到该死的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获取图片的缩略图,并且动态的加载多张图片的更多相关文章

  1. JS获取图片的缩略图

    js获取上传文件的缩略图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  3. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  4. js点击获取—通过JS获取图片的相对坐标位置

    一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

  5. 如何在启用SharePoint浏览器功能的InfoPath 表单中添加托管代码以动态地加载并显示图片

    InfoPath 的浏览器表单不支持加载并显示图片,当然在模板中可以插入图片,但是如果想显示数据库的一幅图片,或是动态加载一张图片就无能为力了. 基实这个问题可以通过在浏览器表单中使用: " ...

  6. esri-leaflet入门教程（5）- 动态要素加载

    esri-leaflet入门教程(5)- 动态要素加载 by 李远祥 在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...

  7. Java_动态重新加载Class总结

    在此记载Java动态重新加载Class的点点滴滴,实现之前也在网上看了很多文章,但发现不是很清晰,后来发现总结,看源码实现还是最靠谱. 直接上代码: package com.lkb.autoCode. ...

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

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

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

    1.布局xml文件 activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/re ...

随机推荐

  1. ios--计时器演示样例：一闪一闪亮晶晶(动画)

    本演示样例实现的动画:UIView定时消失随后又闪现,即一闪一闪的动画 所採用的技术:定时器(NSTimer) + 动画(beginAnimations/commitAnimations) 详细实现步 ...

  2. c#中的构造方法

    c#基础--类的构造方法   当实例化一个类时,系统会自动对这个类的属性进行初始化 数字型初始化成0/0.0 string类型初始化成null char类型初始化成\0 构造器就是构造方法,能够被重载 ...

  3. ElasticSearch refresh和flush的理解

    在索引数据的时候,要保证被索引的文档能够立即被搜索到,就要涉及到_refresh 和_flush这两个方法. 1.fresh 当索引一个文档,文档先是被存储在内存里面,默认1秒后,会进入文件系统缓存, ...

  4. Unix网络编程学习笔记之第12章 IPv4与IPv6的互操作性

    一. 简单介绍 如果我们本章讨论的主机都是支持双栈的,即支持IPv4地址.也支持Ipv6地址. 我们本次讨论的点:client与server端使用的是不同类型的地址.由于同样类型的地址没什么可讲的. ...

  5. oracle数据库中函数和存储过程中的区别

    一.函数必须有返回值,过程没有返回值: 二.函数可以单独执行,过程必须通过execute执行: 三.函数可以嵌入SQL中执行,过程不能. 可以将比较复杂的查询写成函数,然后在过程中调用.

  6. 【Java】String和Date、Timestamp之间的转换

    首先,定义一个Format的日期格式: SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); 一.S ...

  7. ASP.NET MVC学习---（九）权限过滤机制（完结篇）

    相信对权限过滤大家伙都不陌生 用户要访问一个页面时 先对其权限进行判断并进行相应的处理动作 在webform中 最直接也是最原始的办法就是 在page_load事件中所有代码之前 先执行一个权限判断的 ...

  8. ASP.NET MVC学习---（八）三个比较常用的方便的功能

    通过之前的了解 现在我们已经可以使用mvc进行一些简单的开发 但是还不够 哪里不够呢? 为什么现在的程序员喜欢用mvc进行开发 不就是因为它爽吗? 之前介绍的那些特点仅仅是mvc框架的一小部分 只是一 ...

  9. setlocal启动批处理文件中环境变量的本地化

    setlocal启动批处理文件中环境变量的本地化 在执行 SETLOCAL 之后所做的环境改动只限于批处理文件.要还原原先的设置,必须执行 ENDLOCAL. 学习了:https://baike.ba ...

  10. React Native 爬坑之路

    1.react 基础 (创建组件及在浏览器上渲染组件) <!DOCTYPE html> <html lang="en"> <head> < ...