欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery图片上传时按指定比例预览(附代码)

程序员文章站 2022-04-30 10:41:35
...
这次给大家带来jquery图片上传时按指定比例预览(附代码),jquery图片上传时按指定比例预览的注意事项有哪些,下面就是实战案例,一起来看一下。
//**********************图片上传预览插件************************* 
(function($) { 
jQuery.fn.extend({ 
uploadPreview: function(opts) { 
opts = jQuery.extend({ 
width: 0, 
height: 0, 
imgp: "#imgp", 
imgType: ["gif", "jpeg", "jpg", "bmp", "png"], 
callback: function() { return false; } 
}, opts || {}); 
var _self = this; 
var _this = $(this); 
var imgp = $(opts.imgp); 
imgp.width(opts.width); 
imgp.height(opts.height); 
autoScaling = function() { 
if ($.browser.version == "7.0" || $.browser.version == "8.0") imgp.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image"; 
var img_width = imgp.width(); 
var img_height = imgp.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") imgp.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale"; 
imgp.width(img_width * rate); 
imgp.height(img_height * rate); 
} else { 
imgp.width(img_width); 
imgp.height(img_height); 
} 
var left = (opts.width - imgp.width()) * 0.5; 
var top = (opts.height - imgp.height()) * 0.5; 
imgp.css({ "margin-left": left, "margin-top": top }); 
imgp.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; 
} 
imgp.hide(); 
if ($.browser.msie) { 
if ($.browser.version == "6.0") { 
var img = $("<img />"); 
imgp.replaceWith(img); 
imgp = img; 
var image = new Image(); 
image.src = 'file:///' + this.value; 
imgp.attr('src', image.src); 
autoScaling(); 
} 
else { 
imgp.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)" }); 
imgp.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image"; 
try { 
imgp.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = this.value; 
} catch (e) { 
alert("无效的图片文件!"); 
return; 
} 
setTimeout("autoScaling()", 100); 
} 
} 
else { 
var img = $("<img />"); 
imgp.replaceWith(img); 
imgp = img; 
imgp.attr('src', this.files.item(0).getAsDataURL()); 
imgp.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() { 
//建议在#imgp的父元素上加个overflow:hidden;的css样式 
$("input").uploadPreview({ width: 200, height: 200, imgp: "#imgp", imgType: ["bmp", "gif", "png", "jpg"] }); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<input type="file" /> 
<br /> 
<p style="width: 200px; height: 200px; overflow: hidden; border: 1px solid red;"> 
<p id="imgp"> 
</p> 
</p> 
</form> 
</body> 
</html>

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

jquery做出缩略图关联图片切换功能

Jquery数字滚动切换插件实现方法

以上就是jquery图片上传时按指定比例预览(附代码)的详细内容,更多请关注其它相关文章!