摘自：http://www.cnblogs.com/leejersey/p/3660202.html

JS代码：

/*

*名称:图片上传本地预览插件 v1.1

*作者:周祥

*时间:2013年11月26日

*介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari

*插件网站:http://keleyi.com/keleyi/phtml/image/16.htm

*参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;

*使用方法:

<div>

<img id="ImgPr" width="120" height="120" /></div>

<input type="file" id="up" />

把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件

$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});

*/

jQuery.fn.extend({

    uploadPreview: function (opts) {

        var _self = this,

            _this = $(this);

        opts = jQuery.extend({

            Img: "ImgPr",

            Width: 100,

            Height: 100,

            ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],

            Callback: function () {}

        }, opts || {});

        _self.getObjectURL = function (file) {

            var url = null;

            if (window.createObjectURL != undefined) {

                url = window.createObjectURL(file)

            } else if (window.URL != undefined) {

                url = window.URL.createObjectURL(file)

            } else if (window.webkitURL != undefined) {

                url = window.webkitURL.createObjectURL(file)

            }

            return url

        };

        _this.change(function () {

            if (this.value) {

                if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {

                    alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种");

                    this.value = "";

                    return false

                }

                if ($.browser.msie) {

                    try {

                        $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))

                    } catch (e) {

                        var src = "";

                        var obj = $("#" + opts.Img);

                        var div = obj.parent("div")[0];

                        _self.select();

                        if (top != self) {

                            window.parent.document.body.focus()

                        } else {

                            _self.blur()

                        }

                        src = document.selection.createRange().text;

                        document.selection.empty();

                        obj.hide();

                        obj.parent("div").css({

                            'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',

                            'width': opts.Width + 'px',

                            'height': opts.Height + 'px'

                        });

                        div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src

                    }

                } else {

                    $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))

                }

                opts.Callback()

            }

        })

    }

});

Html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>图片上传预览演示-柯乐义</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script src="16/uploadPreview.js" type="text/javascript"></script>

<script>

$(function () {

$("#up").uploadPreview({ Img: "ImgPr", Width: , Height:  });

});

</script>

</head>

<body>

<div style="width:500px;margin:0px auto;"><h2>图片上传预览演示</h2>

<a href="http://keleyi.com/a/bjac/4g8fo9yu.htm" target="_blank">原文</a>

<div><img id="ImgPr" width="" height="" /></div>

<input type="file" id="up" />

</div>

</body>

</html>

jQuery实现图片预览的更多相关文章

  1. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  2. 一款基于jQuery可放大预览的图片滑块插件

    今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...

  3. jquery实现上传图片及图片大小验证、图片预览效果代码

    jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...

  4. jQuery PC端图片预览，鼠标移上去查看大图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

    1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarD ...

  6. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  7. 基于jquery的相册预览gallery

    众多有图片的产品,都要加个图片预览功能.然后市面上就出现了各种各样的相册,下面也提供一个基于jquery的相册. 源码:https://github.com/lilyH/gallery 版本: v0. ...

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

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

  9. C#上传图片和生成缩略图以及图片预览

    因工作需要,上传图片要增加MIME类型验证和生成较小尺寸的图片用于浏览.根据网上代码加以修改做出如下效果图: 前台代码如下: <html xmlns="http://www.w3.or ...

随机推荐

  1. atitit.破解 拦截 绕过 网站 手机 短信 验证码 之自动获取手机短信方式 attilax 总结

    atitit.破解  拦截 绕过 网站 手机 短信 验证码 之自动获取手机短信方式 attilax 总结 1. 自动获取手机短信方式的原理 1 2. 调用api 1 3. ----核心代码 2 4.  ...

  2. make之eval函数

    函数原型: $(eval text) 它的意思是 text 的内容将作为makefile的一部分而被make解析和执行. 需要注意的是该函数在执行时会对它的参数进行两次展开,第一次展开是由函数本身完成 ...

  3. 公共查询类criteria

    package cn.edu.hbcf.common.vo; import java.math.BigDecimal; import java.sql.Timestamp; import java.u ...

  4. 质问微软 WP8.1开发HTTPS 真费劲

    本人用C#多年,WPF2年,一直想做点应用为WP生态贡献一点力量,最近终于有机会接触了 家里的本子是2年前的低压I3,不支持虚拟化,一直没有真机.最近同事妈妈换下来一个820给我拿来做开发用,非常感谢 ...

  5. 爬虫 （6）- Scrapy 实战案例 - 爬取不锈钢的相关钢卷信息

    超详细创建流程及思路 一. 新建项目 1.创建文件夹,然后在对应文件夹创建一个新的python项目 2.点击Terminal命令行窗口,运行下面的命令创建scrapy项目 scrapy startpr ...

  6. flask os.environ 的作用

    使用环境变量取值, 是为了增强系统的适应性, 在某些场景下, 设置环境变量比较方便. 假如, 你有一套代码, 部署在不同的系统中, 恰好这些系统有权限且很容易地设置环境变量, 那么, 这时候通过环境变 ...

  7. Dump 分析法

    云更新目前能够收集32位客户机系统(XP和win7 32位)产生的蓝屏DMP文件到服务端DUMP文件夹,我们可以通过分析蓝屏曰志来确定到底是什么导致了客户机蓝屏. 一.WinDbg是什么?它能做什么? ...

  8. 第二百一十五节，jQuery EasyUI，DateBox(日期输入框)组件

    jQuery EasyUI,DateBox(日期输入框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使 ...

  9. 说出几个与spring同类型的开源框架，说出几个与hibernate同类型的开源框架,说出几个与struts同类型的开源框架

    说出几个与spring同类型的开源框架,说出几个与hibernate同类型的开源框架,说出几个与struts同类型的开源框架 解答: 1)与spring同类型的开源框架:JUIDE.EJB3.0.pi ...

  10. Openstack(Kilo)安装系列之Keystone（四）

    创建租间.用户.角色 一.To configure prerequisites 1.Configure the authentication token: export OS_TOKEN=ADMIN_ ...