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

发布时间：2020-12-14 22:36:46 所属栏目：资源来源：网络整理

导读：js部分是这样的: 复制代码代码如下: //**********************图片上传预览插件************************ //作者：IDDQD(2009-07-01) //Email：iddqd5376@163.com //http://blog.sina.com.cn/iddqd //版本：1.0 //说明：图片上传预览插件 //上传的时候可以生

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> 

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!