<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery1.8.3-min.js"></script>
</head>
<body>
<div style="width:500px;margin:0px auto;"><h2>图片上传预览演示</h2>
    <div><img id="ImgPr" width="120" height="120" /></div>
    <input type="file" id="up" />
</div>
<script>
    /*
     *参数说明: 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()
                }
            })
        }
    });

    $(function () {
        $("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120 });
    });
</script>
</body>
</html>

jquery实现图片上传前本地预览的更多相关文章

  1. jquery实现图片上传前本地预览功能

    HTML <img id="pic" src="" > <input id="upload" name="fil ...

  2. jquery实现图片上传前的预览

    html代码 <div id="uploadPreview"></div> <input id="uploadImage" typ ...

  3. web 图片上传实现本地预览

    在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...

  4. 图片上传前的预览（PHP）

    1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...

  5. HTML5文件上传前本地预览

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型 ...

  6. [.ashx檔？泛型处理例程？]基础入门#2....FileUpload上传前，预览图片（两种作法--ashx与JavaScript）

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...

  7. java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  8. jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

  9. file图片上传之前先预览

    链接:https://www.cnblogs.com/tandaxia/p/5125275.html 记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<inp ...

随机推荐

  1. 免费的ERP真的那么可怕？请少一些偏见！

    为什么说这个话题,因为看到了太多关于对免费ERP的偏见,也许这也只是那些卖软件的营销策略:从事这个行业的人,应该能看出其中的端倪,但是对于吃瓜群众来说,那就真是误导了... 所以今天发表下自己的看法, ...

  2. ERP库位分布看板（库位管理）

    客户正在使用的看板管理,根据厂家需求,做的二次开发. 一:看板效果 二:客户需求 1.客户需求:XX是一家汽车零部件(胶管,硅胶管等)的生产厂家,因此对原料,半成品的有效期有严格的要求. 多次调研得知 ...

  3. 【2017-03-09】SQL Server 数据库基础、四种约束

    一.数据库和内存的区别 数据库:一些存储在硬盘上的数据文件 内存:计算机临时存储的一些数据 二.常用数据库 .Net - SQL Server PHP - MySql Java - Oreacl 三. ...

  4. 启动phpstyle Apache的80端口被win7的System PID=4的进程占用的解决方法

    学习前端是,用到Ajax,php语言,操作mysql数据库,浏览器无法解析php代码(把源码输出):原因,我之前用的是tomcat服务器写jsp,servlet,php用的是apache服务器,没有配 ...

  5. KoaHub.JS用于Node.js的cron作业调度程序代码

    node-schedule A cron-like and not-cron-like job scheduler for Node. Node Schedule     Announcement:  ...

  6. 1257: [CQOI2007]余数之和sum

    1257: [CQOI2007]余数之和sum Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 2001  Solved: 928[Submit][Sta ...

  7. c# 将匿名类或者集合转Json格式数据一些方法

    要说写这个功能呢也是因为工作需要,白天呢上班写个Web页面需要ajax请求后台并将数据以Json格式传会前端,由于公司特殊性吧,不能连外网(很苦比).所以只有等到晚上回家上网边查边写! public ...

  8. 老司机实战Windows Server Docker：2 docker化现有iis应用的正确姿势

    前言 上一篇老司机实战Windows Server Docker:1 初体验之各种填坑介绍了安装docker服务过程中的一些小坑.这一篇,我们来填一些稍大一些的坑:如何docker化一个现有的iis应 ...

  9. 解锁redis锁的正确姿势

    解锁redis锁的正确姿势 redis是php的好朋友,在php写业务过程中,有时候会使用到锁的概念,同时只能有一个人可以操作某个行为.这个时候我们就要用到锁.锁的方式有好几种,php不能在内存中用锁 ...

  10. windows phone 8.1 FlipView 实现照片自动浏览

    FlipView 控件也是一个集合控件,不过它和ListView等控件不同,ListView控件是一次显示多个项,而FlipView则是每次只显示一个项.在windows phone上通过默认的左右滑 ...