jquery 图片上传按比例预览插件集合


Posted in Javascript onMay 28, 2011

js部分是这样的:

//**********************图片上传预览插件************************ 
//作者:IDDQD(2009-07-01) 
//Email:iddqd5376@163.com 
//http://blog.sina.com.cn/iddqd 
//版本:1.0 //说明:图片上传预览插件 
//上传的时候可以生成固定宽高范围内的等比例缩放图 
//参数设置: 
//width 存放图片固定大小容器的宽 
//height 存放图片固定大小容器的高 
//imgDiv 页面DIV的JQuery的id 
//imgType 数组后缀名 
//**********************图片上传预览插件************************* 
(function($) { 
jQuery.fn.extend({ 
uploadPreview: function(opts) { 
opts = jQuery.extend({ 
width: 0, 
height: 0, 
imgDiv: "#imgDiv", 
imgType: ["gif", "jpeg", "jpg", "bmp", "png"], 
callback: function() { return false; } 
}, opts || {}); 
var _self = this; 
var _this = $(this); 
var imgDiv = $(opts.imgDiv); 
imgDiv.width(opts.width); 
imgDiv.height(opts.height); 
autoScaling = function() { 
if ($.browser.version == "7.0" || $.browser.version == "8.0") imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image"; 
var img_width = imgDiv.width(); 
var img_height = imgDiv.height(); 
if (img_width > 0 && img_height > 0) { 
var rate = (opts.width / img_width < opts.height / img_height) ? opts.width / img_width : opts.height / img_height; 
if (rate <= 1) { 
if ($.browser.version == "7.0" || $.browser.version == "8.0") imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale"; 
imgDiv.width(img_width * rate); 
imgDiv.height(img_height * rate); 
} else { 
imgDiv.width(img_width); 
imgDiv.height(img_height); 
} 
var left = (opts.width - imgDiv.width()) * 0.5; 
var top = (opts.height - imgDiv.height()) * 0.5; 
imgDiv.css({ "margin-left": left, "margin-top": top }); 
imgDiv.show(); 
} 
} 
_this.change(function() { 
if (this.value) { 
if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) { 
alert("图片类型必须是" + opts.imgType.join(",") + "中的一种"); 
this.value = ""; 
return false; 
} 
imgDiv.hide(); 
if ($.browser.msie) { 
if ($.browser.version == "6.0") { 
var img = $("<img />"); 
imgDiv.replaceWith(img); 
imgDiv = img; 
var image = new Image(); 
image.src = 'file:///' + this.value; 
imgDiv.attr('src', image.src); 
autoScaling(); 
} 
else { 
imgDiv.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)" }); 
imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image"; 
try { 
imgDiv.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = this.value; 
} catch (e) { 
alert("无效的图片文件!"); 
return; 
} 
setTimeout("autoScaling()", 100); 
} 
} 
else { 
var img = $("<img />"); 
imgDiv.replaceWith(img); 
imgDiv = img; 
imgDiv.attr('src', this.files.item(0).getAsDataURL()); 
imgDiv.css({ "vertical-align": "middle" }); 
setTimeout("autoScaling()", 100); 
} 
} 
}); 
} 
}); 
})(jQuery);

页面部分:
<!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 runat="server"> 
<title></title> 
<meta content="" name="Keywords" /> 
<meta content="" name="Description" /> 
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> 
<script type="text/javascript" src="js/jquery.pack.js"></script> 
<script type="text/javascript" src="js/uploadPreview/jquery.uploadPreview.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
//建议在#imgDiv的父元素上加个overflow:hidden;的css样式 
$("input").uploadPreview({ width: 200, height: 200, imgDiv: "#imgDiv", imgType: ["bmp", "gif", "png", "jpg"] }); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<input type="file" /> 
<br /> 
<div style="width: 200px; height: 200px; overflow: hidden; border: 1px solid red;"> 
<div id="imgDiv"> 
</div> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
JavaScript 10件让人费解的事情
Feb 15 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
从0开始学Vue
Oct 27 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 #Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 #Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 #Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 #Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 #Javascript
actionscript与javascript的区别
May 25 #Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 #Javascript
You might like
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
js脚本实现数据去重
2014/11/27 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
学习python (1)
2006/10/31 Python
Python学习资料
2007/02/08 Python
Python中bisect的用法
2014/09/23 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Python编写一个优美的下载器
2018/04/15 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
工作中的自我评价如何写好
2013/10/28 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
大专生自荐书范文
2014/06/22 职场文书
计划生育证明书写要求
2014/09/17 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
捐书活动倡议书
2015/04/27 职场文书
新店开张宣传语
2015/07/13 职场文书
学风建设主题班会
2015/08/17 职场文书
少儿励志名言(80句)
2019/08/14 职场文书