uploadPreview.js

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 (/msie/.test(navigator.userAgent.toLowerCase())) {

                    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()

            }

        })

    }

});

jquery-1.9.1.min.js

<!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="jquery-1.9.1.min.js" type="text/javascript"></script>

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

<script>

$(function () {

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

});

</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="120" height="120" /></div>

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

</div>

</body>

</html>

http://www.2cto.com/kf/201402/281430.html

Jquery图片上传预览效果的更多相关文章

  1. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  2. input file图片上传预览效果

    两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...

  3. 使用iframe实现图片上传预览效果

    原理:将图片上传的页面放在iframe中,这样就可以在iframe中将图片提交到服务器而不需要页面刷新,提交成功后用脚本实现主页面显示上传的图片. Default.aspx: <%@ Page ...

  4. JS实现图片上传预览效果：方法一

    <script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) ...

  5. ASP.NET工作笔记之一：图片上传预览及无刷新上传

    转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...

  6. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  7. signup图片上传预览经常总结

    html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...

  8. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  9. html 图片上传预览

    Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...

随机推荐

  1. 一模 （5） day1

    第一题: 题目大意:求出1-10^n 这些数中,包含数字3的有多少个. n<=1000: 解题过程: 1.这题一看就是高精度+递推..如果n=1000,那么假设个位是3,其他999位任意..那么 ...

  2. Zooming MKMapView to fit annotation pins

    http://stackoverflow.com/questions/4680649/zooming-mkmapview-to-fit-annotation-pins - (MKCoordinateR ...

  3. java基础之 泛型

    泛型(Generic type 或者generics)是对 Java 语言的类型系统的一种扩展,以支持创建可以按类型进行参数化的类.可以把类型参数看作是使用参数化类型时指定的类型的一个占位符,就像方法 ...

  4. 直接拿来用的10个PHP代码片段

    PHP是一种HTML内嵌式的语言,是一种在服务器端执行的嵌入HTML文档的脚本语言.PHP拥有数以百计的基本功能,支持上千种扩展.这些功能都被很好的加载在PHP站点上,但内置的库有各种各样的命名.在P ...

  5. php练习题:投票

    通过连接数据库,对数据库的增删改来实现一个投票的进行与结果的显示: 方法一: 主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  6. HYSBZ 1415 - 聪聪和可可（概率DP）

    http://vjudge.net/problem/viewProblem.action?id=20613 题意:不用说了,中文题. 这个题可以用概率DP来做. 题中要求猫抓到老鼠的时间期望.分析一下 ...

  7. Ubuntu 14.10 下CPU实时监控mpstat命令详解

    简介 mpstat是Multiprocessor Statistics的缩写,是实时系统监控工具.其报告与CPU的一些统计信息,这些信息存放在/proc/stat文件中.在多CPUs系统里,其不但能查 ...

  8. 技术分享：如何用Solr搭建大数据查询平台

    0×00 开头照例扯淡 自从各种脱裤门事件开始层出不穷,在下就学乖了,各个地方的密码全都改成不一样的,重要帐号的密码定期更换,生怕被人社出祖宗十八代的我,甚至开始用起了假名字,我给自己起一新网名”兴才 ...

  9. JSP如何在servlet将一个数据模型对象传递给jsp页面

    在servlet把对象放到request里,然后jsp里直接通过request取值如 在servlet:(简写了)public void doGet(request,response){UserInf ...

  10. http://182.92.241.20/mypro/login 偶的点金项目细化分包管理平台即将上线！！

    http://182.92.241.20/mypro/login            偶的点金项目细化分包管理平台即将上线!! 敬请期待! 项目外包利器 项目管理利器