找了好多资料也没有找到该死的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. Linux下安装Eclipse的PHP插件（PHPEclipse）

    下载: Eclipse: http://www.eclipse.org/downloads/       (本人用的Ubuntu,直接在SoftWare Center中下载的) (选择适合你系统的相应 ...

  2. nginx $document_uri 参数使用

    $document_uri  表示访问的url 现在我的需求是,访问 www.abc.com  请求到 www.abc.com/abc/在nginx配置文件中加入 if ($document_uri ...

  3. ylb: 数据库操作方法基础

    ylbtech-SQL Server:SQL Server-数据库操作方法基础 数据库操作方法基础. ylb: 数据库操作方法基础 返回顶部 ----------试图操作(view)--------- ...

  4. 由jtable浅谈vector<vector<Object>>的用法(转自a718515028的专栏)

    以前只用过vector<Object>  ,但是在做从数据库导出数据放到jtable中时,发现还有个vector<vector<Object>>的用法. 先说jta ...

  5. 一篇不错的讲解Java异常的文章(转载）----感觉很不错，读了以后很有启发

    六种异常处理的陋习 你觉得自己是一个Java专家吗?是否肯定自己已经全面掌握了Java的异常处理机制?在下面这段代码中,你能够迅速找出异常处理的六个问题吗? OutputStreamWriter ou ...

  6. 【AS3 Coder】任务五：Flash 2D游戏的第二春（上）

    在上一节中,我们基本上已经讲完了游戏中最主要的逻辑部分,不过为了更加全面地运用Starling中的一些特性,在本节中我们将一起来看看如何实现多面板切换以及粒子效果,这两个玩意儿可是比较频繁会出现于St ...

  7. 阿里云ECS服务器IIS和WampServer同时运行

    网上下载WampServer安装包 安装完成之后默认的端口是80 但是由于此端口被IIS占用了 点击WampServer的图标->Apache->Service->测试80端口 出现 ...

  8. asp.net购物车，订单以及模拟支付宝支付（四）---模拟支付宝支付

    下完订单之后到支付宝付款,成功之后再返回来修改订单状态.由于只是测试,所以就没有真正的连接到支付宝,用的是一个模拟支付宝的程序 下载地址:支付宝模拟程序 这是一个vs2010的项目,本来网上找了一个模 ...

  9. zabbix分组报警

    生产上需要在出现报警情况下,不同的主机发送报警给不同的用户 下面实例为分组为dev(开发组)和ops(运维组) 1.把主机进行分组 创建主机群组 配置-->主机群组-->创建主机群组,创建 ...

  10. C#.NET为List加入扩展方法：获取唯一值

    public static class ListTools { /// <summary> /// 获取唯一值列表 /// </summary> /// <param n ...