jquery 图片本地预览
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 图片本地预览的更多相关文章
- 图片本地预览 flash html5
dataURI 一种能够在页面嵌入外部资源的URI方案.能够降低图片或者样式表的http请求数量,提高效率. ie8把dataURI 的属性值限制在32k以内. 图片本地预览: 由于安全原因,通过fi ...
- iOS HTML图片本地预览
引言 相信用过苹果手机的童鞋,会发现很多新闻类的应用,都可以实现HTML图片本地预览,那么这是如何实现的呢?本文将深入阐述其中的原理. 关于此功能,我还实现了一个DEMO,大家可以点击此访问更详细内容 ...
- jQuery图片放大预览
在线演示 本地下载
- 基于jquery实现图片上传本地预览功能
一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...
- 图片上传-本地图片转base64+ie8支持+本地预览支持
最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口 问题来了, 1.ie8 不支持canvas转base64 2.本地预览 base64数据,ie8 ...
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 利用FileReader实现上传图片前本地预览
引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所 ...
- 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取
imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...
- jQuery图片上传前先在本地预览（不经过后端处理）
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...
随机推荐
- 【Oracle】配置oracle数据库最大连接数
数据库中教你如何修改ORACLE最大连接数 Oracle的连接数相关参数:processes.sessions. Oracle的sessions是个派生值,由processes的值决定,session ...
- django 后台管理
修改 admin.py from myapp.models import * from django.contrib import admin # Register your models here. ...
- 【POJ2096】Collecting Bugs 期望
[POJ2096]Collecting Bugs Description Ivan is fond of collecting. Unlike other people who collect pos ...
- (转)hbase master挂掉-zookeeper连接超时原因
link:http://www.51testing.com/?uid-445759-action-viewspace-itemid-812467 并行运行hbase删表,建表操作,多个表多个regio ...
- Haskell 笔记 ①
①一切都是函数,包括常量.表达式,格式:名字 参数1 参数2.. =函数内容 ②if语句(else绝对不可以省略) F=if (..) then x else y ③没有数组,只有列表[1,2,3,4 ...
- JavaScript实现存储HTML字符串
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
- @font-face制作Web Icon
@font-face是CSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体.因为我们把字体都上 ...
- 2015 CTSC & APIO滚粗记
o诶人太弱..... 记一发滚粗记以便治疗我的健忘症= = //文章会不定时修改,添加一些内容什么的...因此最好看一下刷新一下(因为有可能你正在看= =我正在写... 5.2 早上9点坐上长达11小 ...
- Android -- 闹钟服务的使用（单次闹钟）
1. 效果图
- Java_DES 加密和解密源码
Java密码学结构设计遵循两个原则: 1) 算法的独立性和可靠性. 2) 实现的独立性和相互作用性. 算法的独立性是通过定义密码服务类来获得.用户只需了解密码算法的概念,而不用去关心如何实现这些概念. ...