找了好多资料也没有找到该死的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. 发布android apk，Error running app: No target device found.

    https://developer.android.com/studio/run/device.html\ 一台android设备不识别,android文档还挺全 需要安装usb驱动链接里有

  2. Python 并行任务技巧

    FROM:    http://segmentfault.com/a/1190000000382873 Python的并发处理能力臭名昭著.先撇开线程以及GIL方面的问题不说,我觉得多线程问题的根源不 ...

  3. Nginx auto_index和auth_basic

    Nginx auto_index和auth_basic 1.nginx auto_index nginx站点目录浏览功能,默认情况下为关闭 启用或禁用目录列表输出 开启这个功能的前提是站点目录下没有首 ...

  4. oracle 12C SYS,SYSTEM用户的密码都忘记或是丢失

    密码 conn / as sysdba alter user system identified by Abcd1234; manual script first -->manual_scrip ...

  5. 状态机工作流，顺序工作流和Flowchart

    什么是工作流,工作流可以说是对业务处理过程的建模,当我们设计工作流的时候,我们首先要分析业务处理过程中要经历的步骤.然后,我们就可以利用WF创建工作流模型来模拟业务的处理过程. WF工作流包含两种类型 ...

  6. Python内置模块和第三方模块

    1.Python内置模块和第三方模块 内置模块: Python中,安装好了Python后,本身就带有的库,就叫做Python的内置的库. 内置模块,也被称为Python的标准库. Python 2.x ...

  7. 实战Jquery(一)--username校验

    歇息了好几天,最终又開始学习了.jQuery? JQuery is designed to change the way that you write JavaScript. The focus of ...

  8. UE4射击小游戏原型

    尝试使用了下blueprint,不知道是bug还是不熟悉,blueprint有些地方运行的跟逻辑不太一样.不管ue4目前,快速做原型倒是蛮方便的.就等着官方发更多教程讲述关于新的matinee,Nav ...

  9. Java GUI编程SwingUtilities.invokeLater作用

    1 http://blog.micxp.com/index.php/archives/109/ 2

  10. nightwatchJS ---element用法

    .element() Search for an element on the page, starting from the document root. The located element w ...