<!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. linux目录结构 简单讲解

    1./- 根每一个文件和目录从根目录开始.只有root用户具有该目录下的写权限.请注意,/root是root用户的主目录,这与/.不一样 2./bin中 - 用户二进制文件包含二进制可执行文件.在单用 ...

  2. 定制化WinPE

    1 .首先挂载wim Dism /Mount-WIM /WimFile:D:\install.wim /Index: /MountDir:D:\wimmount 2. 如何要修改WinPE的启动项,可 ...

  3. mysql查找以逗号分隔的值-find_in_set

    有了FIND_IN_SET这个函数.我们可以设计一个如:一只手机即是智能机,又是Andriod系统的. 比如:有个产品表里有一个type字段,他存储的是产品(手机)类型,有 1.智能机,2.Andri ...

  4. CentOS 6下编译安装MySQL 5.6

    一:卸载旧版本 使用下面的命令检查是否安装有MySQL Server rpm -qa | grep mysql 有的话通过下面的命令来卸载掉 rpm -e mysql //普通删除模式 rpm -e ...

  5. 关于DOM与BOM的总结

    1.什么是BOM,什么是DOM(基本概念) BOM: Browers Object MOdel           浏览器对象模型 DOM: Document Object MOdel         ...

  6. 机器学习03：K近邻算法

    本文来自同步博客. P.S. 不知道怎么显示数学公式以及排版文章.所以如果觉得文章下面格式乱的话请自行跳转到上述链接.后续我将不再对数学公式进行截图,毕竟行内公式截图的话排版会很乱.看原博客地址会有更 ...

  7. Python自动化--语言基础6--模块操作之re、MySQL、Excel

    1.Python自有模块正则 import re # re.match只匹配字符串的开始,如果字符串开始不符合正则表达式,则匹配失败,函数返回None print(re.match("aaa ...

  8. php 链接mysql的三种方式对比

    PHP连接Mysql的三种方式: 1.原生的连接方式  原生的连接方式是面向过程的写法 <?php $host = 'localhost'; $database = 'test'; $usern ...

  9. UVA - 11636 Hello World! （贪心）

    思路:复制次数最少并且可以部分复制,那么贪心地让当前尽量多的复制,如果最后一次复制会超过n,那就部分复制.即满足并且x尽量小. AC代码 #include <stdio.h> const ...

  10. java网络编程(5)——Tcp

    Tcp相对于Udp就是面向连接的协议,最主要的特点要建立连接之后才能通信,客户端用Socket需要指点地址与端口,服务端用ServeSocket,只需指点监听某个端口,因为是面向连接,所以服务器端一定 ...