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样式
$("#imgfile").uploadPreview({width:230,height:200,imgDiv:"#imgDiv",imgType:["bmp","gif","png","jpg"],maxwidth:3169,maxheight:4759});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="file" id="imgfile"/>
<br />
<div style="width: 200px; height: 200px; overflow: hidden; border: 1px solid red;">
<div id="imgDiv">
</div>
</div>
</form>
</body>
</html>
重述一下该功能:当选择一张图片时,判断是否会超出事先定义的宽跟高,如果超出了则提示图片不符合,并清空上传控件里的值;
在页面上写:
<input name="imgfile" type="file" id="imgfile" runat="server" size="40" />//上传控件
<div id="imgDiv"></div> //图片预览区
在上面的uploadPreview中, width: 230, height: 200表示图片缩放的宽跟高;maxwidth: 3169, maxheight: 4759表示允许图片最大的宽跟高
分享到:
相关推荐
本文将深入探讨“jQuery上传图片预览插件”,这是一个实用的工具,旨在提升用户在网页上上传图片时的体验。该插件在浏览器中提供了图片的实时预览功能,尤其在处理图片大小调整和等比例缩放方面表现卓越,同时兼容...
2. 图片预览:在上传前,用户可以在界面上看到所选图片的预览效果,便于调整和确认。 3. 裁剪操作:提供拖动、缩放等交互方式,让用户自由裁剪图片,满足特定尺寸或比例的要求。 4. 参数设置:开发者可以配置裁剪...
《jQuery图片上传按比例预览插件解析与应用》 在网页开发中,用户上传图片时,为了提供良好的用户体验,通常需要在提交前预览图片,确保图片尺寸符合要求并保持原始比例。jQuery图片上传按比例预览插件就是解决这一...
基于jQuery的图片裁剪插件为此提供了便利,它允许用户在浏览器中预览并裁剪图片,然后以所需尺寸上传。本文将深入探讨此类插件的核心原理、应用场景以及如何实现。 ### 1. jQuery框架基础 jQuery是一个广泛使用的...
这个jQuery插件就弥补了这些不足,为图片上传过程提供了友好的界面和流畅的体验。 预览功能是此插件的一大亮点。在用户选择图片后,插件可以在上传之前显示所选图片的预览,这样用户可以在上传前检查图片的质量和...
在本文中,我们将深入探讨基于jQuery的图片裁剪插件,这是一种广泛应用于Web开发中的工具,用于实现用户交互式的图片裁剪功能。jQuery是JavaScript的一个轻量级库,它简化了DOM操作、事件处理和动画制作,使得创建...
**基于Jquery的图片预览插件** 在Web开发中,图片预览是一个常见的需求,尤其是在用户上传图片或浏览相册时。Jquery作为一个轻量级、高性能的JavaScript库,提供了丰富的API和便利的插件机制,使得实现图片预览功能...
本项目结合了这两者,并引入了`jCrop`插件,实现了图片预览、剪切和上传的功能,对于用户友好的图像管理界面有着重要的意义。 `jsp`是基于Java的服务器端脚本语言,它允许开发者在HTML页面中嵌入Java代码,从而动态...
《cropzoom_jQuery插件:实现高效上传头像裁剪功能》 在现代网页开发中,用户界面的交互性越来越重要,特别是在涉及到个人形象展示的环节,如上传头像。`cropzoom`是一款专为jQuery设计的插件,它允许用户在上传...
综上所述,rcrop是一款强大的、适应移动设备的响应式图片剪裁jQuery插件,它提供了用户友好的界面和灵活的配置选项,能够满足各种图片剪裁需求。通过合理利用rcrop,开发者可以提升用户体验,打造更加专业且易用的...
在IT行业中,图片预览和裁剪是网页开发中常见的功能,尤其在用户需要上传图片时,这样的功能显得尤为重要。"jQuery图片预览与裁剪"是一个针对多种浏览器实现的解决方案,包括火狐、IE6至9、谷歌以及世界之窗等主流...
在图片上传并预览的功能中,jQuery可以监听文件输入元素的变化,读取用户选择的文件,然后使用FileReader API实时预览图片。通过`$(document).on('change', 'input[type=file]', function() {...})`这样的代码,可以...
在IT行业中,jQuery图片裁剪插件是一种广泛应用于网页端的图像处理工具,它使得用户在前端就能方便地对上传的图片进行裁剪,以适应不同的应用场景,如头像设置、产品图片展示等。本篇将详细介绍jQuery图像上传裁剪...
jQuery头像裁剪插件是一种常用的前端开发工具,主要用于用户在网页上自定义上传并裁剪图片,以创建个性化的头像或者其他需要裁剪的图像。这种插件通常结合了HTML、CSS和JavaScript(尤其是jQuery库)技术,为用户...
在实际项目中,jQuery图片裁剪插件广泛应用于用户头像修改、商品图片上传等场景。例如,在电商网站上,用户可以上传产品图片并自行裁剪以适应商品展示的需求;在社交网络中,用户可以裁剪自拍照片作为头像,确保图片...
这个“简单实用的jQuery多尺寸图片上传预览代码”是一个针对网页图片上传功能的解决方案,尤其适用于需要在用户上传前预览不同尺寸图片的应用场景。 首先,我们来看`index.html`。这是项目的主页面,它包含了HTML...
- **JQuery插件**:很可能使用了如jQuery Cropper这样的插件,它提供了一套完整的前端图片裁剪解决方案,包括拖动、缩放、旋转等操作。 - **坐标与尺寸**:用户在前端选定的裁剪区域会生成相应的坐标和宽高,这些...
1. 图像预览:在用户选择图片后,显示预览并提供拖动、缩放等操作。 2. 裁剪区域选择:用户可以通过拖动边框或调整大小来确定裁剪区域。 3. 确定裁剪:用户确认裁剪区域后,插件会截取选定区域并提供数据或直接更新...