找了好多资料也没有找到该死的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. Python中的XMLRPC（Calendar）

    XMLRPC服务器端代码,定义了三个方法名,getMonth获取所给月份的日历,getYear获取一年的日历,getDict测试返回字典的效果. xmlrpc_server.py: #!/usr/bi ...

  2. Linux操作系统实时性分析

    1. 概述 选择一个合适的嵌入式操作系统,可以考虑以下几个因素:  第一是应用.如果你想开发的嵌入式设备是一个和网络应用密切相关或者就是一个网络设备,那么你应该选择用嵌入式Linux或者uCLinux ...

  3. crossapp的屏幕适配

    1.分辨率是的某个尺寸大小的屏幕里的像素点数ppi 2.crossapp茶用iphone4为基准比例值为1 3.其它分辨率设备的换算dp = px * 320/ 屏幕PPI 4.crossapp里点. ...

  4. zabbix自定义触发器

    zabbix中监控项仅负责收集数据,而通常收集数据的目的还包括在某指标对应的数据超出合理范围时给相关人员发送告警信息,"触发器"正式 用于为监控项所收集的数据定义阈值,每一个触发器 ...

  5. Java 实现模板方法(TemplateMethod)模式

    类图 /** * 业务流程模板.提供基本框架 * @author stone * */ public abstract class BaseTemplate { public abstract voi ...

  6. mysql 语句要求

    mysql 语句不可以有单引号,要把单引号替换为双引号!

  7. Maven环境下搭建SSH框架

    © 版权声明:本文为博主原创文章,转载请注明出处 1.搭建环境 Maven:3.3.9 Struts2:2.5.10 Spring:4.3.8.RELEASE Hibernate:5.1.7.Fina ...

  8. 微信公众号开发之创建菜单栏代码示例（php）

    思路很简单:就是先获取access_token,然后带着一定规则的json数据参数请求创建菜单的接口.废话不多讲,直接上代码. class Wechat { public $APPID="w ...

  9. 更改 Nginx 服务的默认用户

    为什么要更改 Nginx 服务的默认用户:就像更改 ssh 的默认 22 端口一样,增加安全性,Nginx 服务的默认用户是 nobody ,我们更改为 nginx 1.添加 nginx 用户 use ...

  10. 浅谈BloomFilter【上】基本概念和实现原理

        在日常生活中.包括在设计计算机软件时,我们常常要推断一个元素是否在一个集合中.     比方在字处理软件中,须要检查一个英语单词是否拼写正确(也就是要推断 它是否在已知的字典中).在 FBI. ...