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 相关文章推荐
关于Javascript与iframe的那些事儿
Jul 04 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
js选择器全面解析
Jun 27 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
Vue 实现拨打电话操作
Nov 16 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的Yii框架中扩展的安装与使用
2016/04/01 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
Python 专题一 函数的基础知识
2017/03/16 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
解决python报错MemoryError的问题
2018/06/26 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
Python检查ping终端的方法
2019/01/26 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Django多数据库联用实现方法解析
2020/11/12 Python
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
行政部主管岗位职责
2013/12/28 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
垃圾桶标语
2014/06/24 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
一文搞懂php的垃圾回收机制
2021/06/18 PHP
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL