uploadPreview.js

/*

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

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

*参数说明: 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()

            }

        })

    }

});

　　

jsp

<%@ page language="java" contentType="text/html; charset=utf-8"

	pageEncoding="utf-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="css/common.css">

   <link rel="stylesheet" href="css/main.css">

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

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

<style type="text/css">

	.upimage{

		padding: 6px 10px;

		height: 35px;

		line-height: 20px;

		position: relative;

		cursor: pointer;

		color: #888;

		background: #fafafa;

		border: 1px solid #ddd;

		border-radius: 4px;

		overflow: hidden;

		display: inline-block;

		float: left;

		margin-left: 10px;

		margin-top: 39px;

	}

</style>

	function choose(){

		$("#file").show().click();

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

	 }

</script>

</head>

<body>

		<form action="${pageContext.request.contextPath}/update.do" enctype="multipart/form-data"

		method="post">

		<table>

			<tr>

					<td  class="td_right">图片：</td>

					<td class="">

						<div style="float: left;width: 120px;">

							<img id="ImgPr" src="${serverPath}/${zySubscription.imgurl}" width="120" height="120" />

						</div>

						<input type="button" value="上传图片" onclick="choose();" class="upimage"/>

						<div hidden="true">

							<input type="file" name="file" id="file" hidden="true"/><font color="red">${msg}</font>

						</div>

	                 </td>

				</tr>

		</table>

	</form>

</body>

</html>

　　

jquery 图片本地预览的更多相关文章

  1. 图片本地预览 flash html5

    dataURI 一种能够在页面嵌入外部资源的URI方案.能够降低图片或者样式表的http请求数量,提高效率. ie8把dataURI 的属性值限制在32k以内. 图片本地预览: 由于安全原因,通过fi ...

  2. iOS HTML图片本地预览

    引言 相信用过苹果手机的童鞋,会发现很多新闻类的应用,都可以实现HTML图片本地预览,那么这是如何实现的呢?本文将深入阐述其中的原理. 关于此功能,我还实现了一个DEMO,大家可以点击此访问更详细内容 ...

  3. jQuery图片放大预览

    在线演示 本地下载

  4. 基于jquery实现图片上传本地预览功能

    一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...

  5. 图片上传-本地图片转base64+ie8支持+本地预览支持

    最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口 问题来了, 1.ie8 不支持canvas转base64 2.本地预览 base64数据,ie8 ...

  6. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  7. 利用FileReader实现上传图片前本地预览

    引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...

  8. 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取

    imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...

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

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

随机推荐

  1. TODO软件工程--如何预算项目的工期

    我的项目后台接口已经开发好,是前人留下的接口,现在只需要和前端联调,本以为后台的开发周期短,可以提早上线,可以因为旧接口不兼容新的要求 不得不重新写,造成了工期的延误. 如何计算一个工期被提上日程.

  2. BZOJ2080 : [Poi2010]Railway

    如果存在$k$使得$i<j<k$,且$a[k]<a[i]<a[j]$,那么$i$和$j$不能在一个栈中. 设$b[i]=\min(a[i..n])$,如果$b[j]<a[ ...

  3. Nginx设置Js、Css等静态文件的缓存过期时间

    location ~.*\.(js|css|html|png|jpg)$ { expires 3d; } expires    3d; //表示缓存3天 expires    3h; //表示缓存3小 ...

  4. topcoder SRM 617 DIV2 SlimeXSlimonadeTycoon

    此题需要注意的两个地方是 (1)在某天生产出来的Slimonades,必须在stale_limit天内必须卖完,否则超过stale_limit内抛弃(东西都有保质期) (2)每天生产出来的Slimon ...

  5. ACM：a^b%p-数论-快速幂-快速乘

    a^b Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: Description 求a的b次方,取模mod(1<=a,b ...

  6. js判断访问来源

    通过navigator的userAgent属性来判定 userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值.一般来讲,它是在 navigator.appCode ...

  7. BZOJ 3732 题解

    3732: Network Description 给你N个点的无向图 (1 <= N <= 15,000),记为:1…N. 图中有M条边 (1 <= M <= 30,000) ...

  8. URAL 1203. Scientific Conference(瞎搞)

    题目链接 本来觉得这不是经典的贪心吗..果断水一次,wa了,看了看discuss,发现貌似不好水,土土的DP了一下,复杂度很高了,又T了...然后想想单调队列,二分什么的...不好往上加,直接搞了标记 ...

  9. 团队计划backlog

    http://www.cnblogs.com/threemonkey/p/5388439.html

  10. Centos 下面升级系统内核(转)

    1.导入public key     1 rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org 2.安装ELRepo到CentOS 6. ...