JS获取图片的缩略图,并且动态的加载多张图片
找了好多资料也没有找到该死的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获取图片的缩略图,并且动态的加载多张图片的更多相关文章
- JS获取图片的缩略图
js获取上传文件的缩略图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- JS获取图片实际宽高及根据图片大小进行自适应
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ad ...
- JS获取图片实际宽高
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...
- js点击获取—通过JS获取图片的相对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置 源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...
- 如何在启用SharePoint浏览器功能的InfoPath 表单中添加托管代码以动态地加载并显示图片
InfoPath 的浏览器表单不支持加载并显示图片,当然在模板中可以插入图片,但是如果想显示数据库的一幅图片,或是动态加载一张图片就无能为力了. 基实这个问题可以通过在浏览器表单中使用: " ...
- esri-leaflet入门教程(5)- 动态要素加载
esri-leaflet入门教程(5)- 动态要素加载 by 李远祥 在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...
- Java_动态重新加载Class总结
在此记载Java动态重新加载Class的点点滴滴,实现之前也在网上看了很多文章,但发现不是很清晰,后来发现总结,看源码实现还是最靠谱. 直接上代码: package com.lkb.autoCode. ...
- 为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
- 实现LoaderCallbacks接口动态循环加载网上图片并展示在手机屏幕上 ...
1.布局xml文件 activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/re ...
随机推荐
- react热加载失败
react热加载失败 原因:路径名字大小写错误, 不是全部加载失败,有的时候可以用,有的时候不可以 热加载插件:webpack-dev-server
- DELLR720 独立显卡DVI转VGA问题
第一种情况:DELLR720默认不接独立显卡,直接用板载VGA输出,不需要调system blos 第二种情况:DELLR720接独立显卡,需要DVI输出,需要更改系统blos system blos ...
- WEB服务器、应用程序服务器、HTTP服务器区别 【转】
WEB服务器.应用程序服务器.HTTP服务器有何区别?IIS.Apache.Tomcat.Weblogic.WebSphere都各属于哪种服务器,这些问题困惑了很久,今天终于梳理清楚了: Web服务器 ...
- 转:集成平台 jira 的使用与方案
http://wiki.csdn.net/pages/viewpage.action?pageId=1868089 作者:Martin Seibert SEIBERT MEDIA 首席执行官. 原文地 ...
- 微信小程序 - 一种简写方式
// 第一种 isOrder: function() { //code }, // 第二种 isOrders() { //code },
- android推断手机是否root
关于推断手机是否已经root的方法.假设app有一些特殊功能须要root权限,则须要推断是否root. 比方一些市场下载完app后自己主动安装. /** * @author Kevin Kowalew ...
- Codeforces 463C Gargari and Bishops 题解
题目出处: http://codeforces.com/contest/463/problem/C 感觉本题还是挺难的.须要好好总结一下. 计算对角线的公式: 1 右斜对角线,也叫主对角线的下标计算公 ...
- 企业级监控工具Cacti安装配置全过程
Cacti 在英文中的意思是仙人掌的意思,Cacti是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具.它通过 snmpget来获取数据,使用 RRDtool绘画 ...
- win10 microsoft edge 浏览器收藏夹位置
1.打开文件夹,找到(注意 用户名 改为你自己的用户名) C:\Users\用户名\AppData\Local\Packages\Microsoft.MicrosoftEdge_8wekyb3d8bb ...
- 应用沙盒(Application Sandbox)
一.应用沙盒目录 应用沙盒包含多个目录: 1.应用程序包:(application bundle):包含所有的资源文件和可执行文件,并且是只读目录. 2.Library/Preferences/:存放 ...