<!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. docker cs50 ide 安装

    ECS上搭建Docker(CentOS7): https://help.aliyun.com/document_detail/51853.html docker官方文档: https://docs.d ...

  2. golang验证提交的数据中某个字段是否重复

    提交的json数据如下: { , , , ", , , "screen_mode": "3,2", , "ad_plats":[ ...

  3. Supervisor 安装及配置管理uwsgi进程

    Supervisor介绍 Supervisor 允许其用户在UNIX类操作系统上控制多个进程. 块如下: 方便 需要为每个进程实例编写rc.d脚本通常是不方便的. rc.d脚本是进程初始化/自动启动/ ...

  4. Redmine基础: 邮件配置

    1.用文本编辑器打开 D:\Bitnami\redmine-2.6.5-0\apps\redmine\htdocs\config\configuration.yml 文件,找到以下内容: 2.配置邮件 ...

  5. linux 添加静态路由

    Linux下静态路由修改命令方法一:添加路由route add -net 192.168.0.0/24 gw 192.168.0.1route add -host 192.168.1.1 dev 19 ...

  6. ipset批量配置iptables

    简介: ipset是iptables的扩展,允许你创建匹配整个地址sets(地址集合)的规则.而不像普通的iptables链是线性的存储和过滤,ip集合存储在带索引的数据结构中,这种集合比较大也可以进 ...

  7. CENTOS6.6下mysql MMM架构搭建

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn MMM(Master-Master replication mana ...

  8. NDK开发，如何配置 debug环境

    刚开始做NDK 开发的时候,Android Studio 还没提供了 native C/C++ 设置断点 调试,我们都是通过输出 日志来调试,这样费时耗力.Android Studio 应该是在 2. ...

  9. Mysql(三)-2:数据类型

    一 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选的 详细参考: http://www.runoob.com/mysql/mysql-data ...

  10. Spring-Security+Freemarker 开启跨域请求伪造防护功能

         CSRF简介--摘抄自<Spring实战(第4版)> 我们可以回忆一下,当一个POST请求提交到"/spittles"上时,SpittleController ...