<!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. .NET图表控件(LightningChart )的用法

    概述 LightningChart (LightningChart Ultimate) 软件开发工具包是微软Visual Studio 的一个插件,专攻大数据可视化呈现问题,用于 WPF(Window ...

  2. 在linux内核中实现自己的系统调用

    如实现一个简单的打印:printk 1.cd linux-ok6410/kernel/ vim printk.cvoid sys_pk(){printk("<0>this is ...

  3. javascript 数字字母组合的随机数

    Math.random()方法用于生成,结果为0-1间的一个伪随机数(包括0,不包括1) ,通常的办法是结合parseInt().Math.floor() 或者 Math.ceil()进行四舍五入处理 ...

  4. gitlab手动安装

    [博客园 淡水的天空]] 老版 新版 Omnibus package installation Manually

  5. centos 手动增加swap分区

    SWAP是Linux中的虚拟内存,用于扩充物理内存不足而用来存储临时数据存在的.它类似于Windows中的虚拟内存.在Windows中,只可以使用文件来当作虚拟内存.而linux可以文件或者分区来当作 ...

  6. MySQL复制同一个服务器的表结构和表数据

    例如,现在服务器上有数据库 dbx 和 dby,dbx中有很多表,要把dbx中的表全部复制到dby,如下操作: 首先: use dby; [复制表结构] CREATE TABLE user LIKE ...

  7. windows FileZilla Server 开启FTP over TLS

    FileZilla Server官方下载地址: https://filezilla-project.org/download.php?type=server FileZilla Server 开启FT ...

  8. 在一台电脑上运行两个或两个以上的tomcat

    前言 在开发过程中,我们可能会同时用到多个tomcat,但以正常安装的形式安装多个tomcat,无论启动哪一个tomcat,打开的都是配置了环境变量的那一个tomcat,所以进行一些设置,以达到我们同 ...

  9. bzoj 2176 最小表示

    2176: Strange string Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 419  Solved: 174[Submit][Status ...

  10. Duilib第一步(III)-知识进阶

    核心模块 CWindowWnd:窗口对象管理父类 创建窗口. 窗口消息过程处理. 提供窗口子类化.超类化接口. CDialogBuilder:空间布局类 解析XML界面布局文件,构建控件树 创建控件对 ...