<!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实施序列的人员,统称为ERP实施顾问. ERP实施顾问“是把公司的ERP实施作为己任,并投入大量的人力和财力以实现这一目标的群体”.他们精通ERP理论与ERP软件的使用方法,熟练运用项目实施方法 ...

  2. 本人开发的JavaWeb急速框架Blast上线了

    JAVA 急速WEB框架Blast --对JavaWeb的学习性框架,参考了spring的实现 --阅读Blast源码可以快速掌握JavaWeb常用技术和方法论,并付诸实践 Blast 是基于 Jav ...

  3. 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-2

    来个目录吧: 第一章 第二章 第三章 暂时就这么多.后面路线更新吧 Entity Framework Core Nuget包管理 如果你创建项目的时候启用了个人身份验证的话,项目中就已经包含了EFCo ...

  4. 2818: Gcd

    2818: Gcd Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 2170  Solved: 979[Submit][Status][Discuss] ...

  5. 【记录】iOS10 点击推送栏的问题

    之前做的一个用户点击 推送栏然后处理相应事件是在这里面处理的 - (void)application:(UIApplication *)application didReceiveRemoteNoti ...

  6. 全新的 flow.ci Dashboard UI 上线

    全新的 flow.ci Dashboard 页面上线了,更快捷地创建项目,构建列表页面新增分支,Pull Request 界面:侧边栏新增构建任务监控和项目监控,整个 Dashboard 界面焕然一新 ...

  7. java 文件操作（二）---Files和Path

    自从java 7以来,引入了FIles类和Path接口.他们两封装了用户对文件的所有可能的操作,相比于java 1的File类来说,使用起来方便很多.但是其实一些本质的操作还是很类似的.主要需要知道的 ...

  8. Centos7忘记密码

    CentOS 7 root密码的重置方式和CentOS 6完全不一样,CentOS 7与之前的版本6变化还是比较大的,以进入单用户模式修改root密码为例. 1.重启开机按esc 2.按e 3.编辑修 ...

  9. 安装vnc远程连接CentOS桌面

    1.查看本机是否有安装vnc(centOS5默认有安装vnc) rpm -q vnc vnc-server 如果显示结果为: package vnc is not installedvnc-serve ...

  10. SPOJ-ANTP [组合数学]

    tags:[组合][预处理]题解:关于方程A+C+B=X的正整数解组数.我们用插板法可知,解的组数=在(X-1)个元素中选择两个元素的方案数故答案为:C(x-1,2)+C(x,2)+C(x+1,2)+ ...