脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 图片上传按比例预览

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

 更新时间：2011年05月28日 01:03:37   作者：  
上传的时候可以生成固定宽高范围内的等比例缩放图的代码，需要的朋友可以参考下。
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>
您可能感兴趣的文章:

相关文章

  • EasyUI中的tree用法介绍

    EasyUI中的tree用法介绍

    不知不觉10月都结束了，又要到年底了。看看自己上次写过的文章后，已经2个月都没写东西了
    2011-11-11
  • jQuery简单实现input文本框内灰色提示文本效果的方法

    jQuery简单实现input文本框内灰色提示文本效果的方法

    这篇文章主要介绍了jQuery简单实现input文本框内灰色提示文本效果的方法,涉及jQuery针对页面元素的遍历与样式动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • jQuery实现鼠标经过像翻页和描点链接效果

    jQuery实现鼠标经过像翻页和描点链接效果

    这篇文章主要介绍了jQuery实现鼠标经过像翻页和描点链接效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08
  • jquery轮播的实现方式 附完整实例

    jquery轮播的实现方式 附完整实例

    这篇文章主要介绍了jquery轮播的实现方式，文中分享了jQuery轮播完整实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • jQuery动态创建html元素的常用方法汇总

    jQuery动态创建html元素的常用方法汇总

    这篇文章主要介绍了jQuery动态创建html元素的常用方法,包括jQuery追加元素、遍历数组以及使用模板等方法,非常具有实用价值,需要的朋友可以参考下
    2014-09-09
  • jquery 清空file域示例(兼容个浏览器)

    jquery 清空file域示例(兼容个浏览器)

    在本文将为大家介绍喜下如何使用jquery 清空file域并做到兼容个浏览器，感兴趣的朋友可以参考下
    2013-10-10
  • jQuery中data()方法用法实例

    jQuery中data()方法用法实例

    这篇文章主要介绍了jQuery中data()方法用法,实例分析了data()方法向匹配元素附加数据及获取数据的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • JQuery slideshow的一个小问题(如何发现及解决过程)

    JQuery slideshow的一个小问题(如何发现及解决过程)

    在做一个网页homepage的时候，想用slideshow［1］做图片切换效果,在打开页面所以的正常测试都没问题:当浏览器同时打开多个tab，停留他tab中的页面一段时间后，会出现图片是最后一张图片,针对这个问题，本文给予了详细的解决方法，感兴趣的朋友可以了解下
    2013-02-02
  • jQuery对象初始化的传参方式

    jQuery对象初始化的传参方式

    本文简单介绍了jQuery对象初始化传参方式，以及具体的示例，是篇非常不错的文章，这里推荐给小伙伴们。
    2015-02-02
  • jquery-ui 进度条功能示例【测试可用】

    jquery-ui 进度条功能示例【测试可用】

    这篇文章主要介绍了jquery-ui 进度条功能,结合完整实例形式分析了jquery-ui 结合时间函数实现进度条功能相关操作技巧,需要的朋友可以参考下
    2019-07-07

最新评论