<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.sou-upload{
list-style: none;
margin:0;
padding: 0;
}
.sou-upload li{
cursor: pointer;
float: left;
margin-right: 15px;
width: 45px;
height: 46px;
overflow: hidden;
}
.sou-upload li input{
display: none;
}
.sou-upload li img{
max-width: 100%;
}
</style>
</head>
<body>
<ul class="sou-upload"  id="sou-upload">
<li>
<input type="file" id="sou-upload1" accept="image/*">
<img src="img/upload.png" alt="" onclick="$('input[id=sou-upload1]').click();" >
</li>
<li>
<input type="file" id="sou-upload2" accept="image/*">
<img src="img/upload.png" alt="" onclick="$('input[id=sou-upload2]').click();" >
</li>
<li>
<input type="file" id="sou-upload3" accept="image/*">
<img src="img/upload.png" alt="" onclick="$('input[id=sou-upload3]').click();" >
</li>
<li>
<input type="file" id="sou-upload4" accept="image/*">
<img src="img/upload.png" alt="" onclick="$('input[id=sou-upload4]').click();" >
</li>
</ul>
<script>
$(".sou-upload li").each(function(index, el) {
var fileUl=document.getElementById('sou-upload');
var file=fileUl.getElementsByTagName('li')[index];
file.getElementsByTagName('input')[0].onchange=function(){
var fileList = this.files;   
var imgObjPreview = this.parentNode.getElementsByTagName('img')[0];
if (this.files && this.files[0]) {
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(this.files[0]);
 
}
else {
//IE下，使用滤镜
this.select();
var imgSrc=this.value;    //这里的imgsrc地址直接拿的input的
var localImagId = this.parentNode.getElementsByTagName('img')[0];
//图片异常的捕捉，防止用户修改后缀来伪造图片
 
try {
 
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
 
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
imgObjPreview.src=imgSrc;
 
}
catch (e) {
 
alert("您上传的图片格式不正确，请重新选择!");
 
return false;
 
}
document.selection.empty();
 
}
return true;
}
});
</script>
</body>
</html>

js+jq实现图片预览，支持到ie9+ff+chrome的更多相关文章

  1. JS实现的图片预览功能

    之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...

  2. 【原创】iOS图片预览(支持缩放和移动)

    1.传入图片 PreViewController.h: #import <UIKit/UIKit.h> @interface PreViewController : UIViewContr ...

  3. 上传图片预览 支持IE8+，FF，Chrome ，保留原图片比例

    代码及效果:链接

  4. JS实现图片预览与等比缩放

    案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...

  5. 图片预览(适用于IE6,9,10，Firefox)

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. 适用于各浏览器支持图片预览，无刷新异步上传js插件

    文件上传无疑是web应用中一个非常常用的功能,不管是PHP.jsp还是aspx.mvc等都会需要文件上传,但是众所周知当使用自带的文件上传功能时总会出现页面刷新的情况.当然现在有了html5这个好东西 ...

  7. JS魔法堂之实战：纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

  8. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  9. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

随机推荐

  1. Java的一些良好习惯及细节------持续更新中...

    1.在做条件判断时,不要将变量放在判断符的左边,这样做可以防止出现空指针异常,以字符串比较为例: String name = "Tom"; //这种方式不推荐,如果变量name为空 ...

  2. Javascript获取数组中的最大值和最小值方法汇总

    方法一 sort()方法 b-a从大到小,a-b从小到大 var max2 = arr.sort(function(a,b){ return b-a; })[0]; console.log(max2) ...

  3. ubuntu 双网卡建网桥脚本实现

    #!/bin/bash interface1=`ls /sys/class/net|grep en|awk 'NR==1{print}'` interface2=`ls /sys/class/net| ...

  4. 搭建dnsmasq服务器，局域网内部解析

    系统:centos6.5 公司内部需求一台dns server,解析内部域名(该域名不需要在公网上解析) 安装了"bind bind-utils"包,配置里设置转发到外部电信dns ...

  5. LVS结合keepalived配置测试

     LVS/DR + keepalived配置 注意:前面虽然我们已经配置过一些操作,但是下面我们使用keepaliave操作和之前的操作是有些冲突的,所以若是之前配置过DR,请首先做如下操作:   三 ...

  6. Windows Server 2016-存储新增功能

    本章给大家介绍有关Windows Server 2016 中存储方面的新增功能,具体内容如下: 1.Storage Spaces Direct: 存储空间直通允许通过使用具有本地存储的服务器构建高可用 ...

  7. MySQL的BlackHole引擎在主从架构中的作用

    MySQL在5.x系列提供了Blackhole引擎–“黑洞”. 其作用正如其名字一样:任何写入到此引擎的数据均会被丢弃掉, 不做实际存储:Select语句的内容永远是空. 和Linux中的 /dev/ ...

  8. LeetCode第五天

    leetcode 第五天 2018年1月6日 22.(566) Reshape the Matrix JAVA class Solution { public int[][] matrixReshap ...

  9. 使用eclipse写C

    C终究还是程序员进阶少不了坎,熟悉nginx ,深入学习php等最后都逃不过C,那为何不去拥抱呢...'='',c对我来说也是老朋友了,但是那时做 硬件作比赛而且比较浅显,现在决定还是 重新试试吧,, ...

  10. npm http-server Dockerfile alpine 微容器,袖珍体积,解决时区问题

    前端写得少,但是前端技术的思想也是非常有学习的价值,用VUE写了几个手机form页面,体验了一番spa,用docker部署也是非常简单 直接docker pull node  676M体积.不能忍. ...