jquery图片上传时按指定比例预览（附代码）
程序员文章站
2022-03-28 21:41:45
...
这次给大家带来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图片上传时按指定比例预览（附代码）的详细内容，更多请关注其它相关文章！
上一篇： javascript Function函数理解与实战
下一篇： JS单线程异步io回调的特性详解