找了好多资料也没有找到该死的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. ES6中的迭代器(Iterator)和生成器(Generator)（一）

    用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简化数据操作 ...

  2. sqoop使用记录

    sqoop简介 Sqoop是用来实现结构型数据(如关系数据库)和Hadoop之间进行数据迁移的工具.它充分利用了MapReduce的并行特点以批处理的方式加快数据的传输,同时也借助MapReduce实 ...

  3. python 注释xml的元素

    use xml.dom.minidom 注释xml元素和去除xml注释. code is: #!/usr/bin/env python from xml.dom import minidom impo ...

  4. Java高级特性—锁

    1).synchronized 加同步格式: synchronized( 需要一个任意的对象(锁) ){ 代码块中放操作共享数据的代码. } synchronized的缺陷 synchronized是 ...

  5. Java虚拟机内存分配和回收策略

    1 对象优先分配在Eden区 对象优先在Eden进行分配,大多数情况下,对象在新生代Eden区进行分配.当Eden区没有足够的空间进行分配时,虚拟机会发起一次Minor GC. 新生代GC(Ninor ...

  6. 创建es索引{"acknowledged"=>true, "shards_acknowledged"=>false}

    创建es索引{"acknowledged"=>true, "shards_acknowledged"=>false} [2018-05-19T13: ...

  7. winrm.cmd

    C:\Windows\system32>winrm.cmdWindows 远程管理命令行工具 Windows 远程管理(WinRM)是 WS-Management 协议的 Microsoft 实 ...

  8. centos 7 查看系统/硬件信息及运维常用命令＋联想Y430P无线网卡驱动安装

     centos 7 查看系统/硬件信息及运维常用命令 当前环境:联想Y430P  CentOS 7.3 [root@yan-001 ~] # uname -a # 查看内核/操作系统/CPU信息的Li ...

  9. How to Check some table was locked

    select * from sys.sysprocesses where blocked<>0  看看waittime是不是很大  kill spid

  10. Solution to Triangle by Codility

    question: https://codility.com/programmers/lessons/4 we need two parts to prove our solution. on one ...