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: 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>

jQuery图片上传前先在本地预览的更多相关文章

  1. jQuery图片上传前先在本地预览（不经过后端处理）

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...

  2. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  3. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  4. Thinkphp5+plupload图片上传功能，支持实时预览图片。

    今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...

  5. ajax：html5上传文件，上传之前可以实现本地预览

    本主题主要涉及两个新内容: 1.上传文件(主要使用了FormData) 2.本地预览(主要使用了FileReader) html5的FormData其实就是平时的Form表单,只是html5可以直接新 ...

  6. jquery图片上传前预览剪裁

    http://www.webmotionuk.co.uk/jquery/image_upload_crop.php http://keleyi.com/a/bjad/liuvpkke.htm 不错的d ...

  7. jquery 图片上传本地预览V1.2

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级  修复jquery版本问题  支持任意jqu ...

  8. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  9. HTML5 FileReader实现图片上传前预览

    如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...

随机推荐

  1. 删除或修改eclipse中svn的账号密码

    由于eclipse没有自带的管理svn账号的功能,我也没有找到相关的插件,要是有朋友知道的话也可以跟我说下哦!以下是关于自己手动去删除eclipse 软件的 svn账号,以便切换项目的时候去更换svn ...

  2. MVC 设计模式与三层架构

    一.JavaEE开发模式 什么是开发模式 模式是在开发过程中总结出的"套路",总结出的一套约定俗成的设计模式 JavaEE模式 model1模式 技术组成 :jsp+javaBea ...

  3. 概率论与数理统计基础<1>:随机事件与随机变量

    Part1. 随机事件 1-1.随机试验 随机试验:可以在相同条件下重复进行,每次试验的结果不止一个,事先知道所有可能的结果但不确定是哪一个的试验. 举例:重复的抛出一枚均匀的硬币就是一个随机试验,事 ...

  4. 数据准备<5>:变量筛选-实战篇

    在上一篇文章<数据准备<4>:变量筛选-理论篇>中,我们介绍了变量筛选的三种方法:基于经验的方法.基于统计的方法和基于机器学习的方法,本文将介绍后两种方法在Python(skl ...

  5. 【20181102T1】优美的序列【二分+ST表】

    题面 [正解] 相当于是 \(GCD_{i=L}^{R} A_i = min_{i=L}^{R} \{A_i\}\) 然后GCD可以用ST表实现\(O(log A_i)\)查询 并且GCD是递减的,所 ...

  6. Codeforces Round #461 (Div. 2)

    A - Cloning Toys /* 题目大意:给出两种机器,一种能将一种原件copy出额外一种原件和一个附件, 另一种可以把一种附件copy出额外两种附件,给你一个原件, 问能否恰好变出题目要求数 ...

  7. CI Weekly #15 | 据说新版 flow.ci Dashboard 界面很酷

    好久不见 :) 最近工程师们卯足了劲,全新的 flow.ci dashboard 页面 已经与所有用户见面了.更快捷地创建项目,构建列表页面新增分支,Pull Request 界面:侧边栏新增构建任务 ...

  8. [SimpleOJ229]隧道

    题目大意: 有10个格子,初始状态a和b分别在5和6上. 现在有n个任务,每个任务都有特定的位置. 在每个单位时间,a和b可以分别进行以下事件中的任意一件: 1.向左(右)移动一个格子: 2.锁定在当 ...

  9. 【openjudge】 CDQZ challenge 4

    改了三天,提交17次,一定要纪念一下! 1004:Challenge 4 总时间限制:  10000ms 单个测试点时间限制:  1000ms 内存限制:  262144kB 描述 给一个长为N的数列 ...

  10. python开发_platform_获取操作系统详细信息工具

    ''' python中,platform模块给我们提供了很多方法去获取操作系统的信息 如: import platform platform.platform() #获取操作系统名称及版本号,'Win ...