jquery 图片上传按比例预览插件集合 - Web前端

作者：98wpeu发布时间：2026-10-10分类：网页前端技术浏览：3

导读：JS部分是这样的:复制代码代码如下://**********************图片上传预览插件************************//作者：IDDQD(20...

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() { returnfalse; }
}, 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>

标签：图片上传按比例插件 Web jquery

上一篇：jqgrid 简单学习笔记 - Web前端
下一篇：jQuery调用WebService的实现代码 - Web前端

jquery 图片上传按比例预览插件集合 - Web前端

相关推荐