`
wangrl
  • 浏览: 152291 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多
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表示允许图片最大的宽跟高
分享到:
评论
3 楼 huzhiyong56 2011-12-29  
如果把它放在weblogic服务器上?图片还取得到吗?
2 楼 zfting 2011-10-13  
哥哥!!连IE都不支持!!我的个晕!
1 楼 seyaa 2011-08-24  
谢谢分享 解决了 我的问题

相关推荐

    jquery上传图片预览插件

    本文将深入探讨“jQuery上传图片预览插件”,这是一个实用的工具,旨在提升用户在网页上上传图片时的体验。该插件在浏览器中提供了图片的实时预览功能,尤其在处理图片大小调整和等比例缩放方面表现卓越,同时兼容...

    jQuery实现的对上传图片进行裁剪插件

    2. 图片预览:在上传前,用户可以在界面上看到所选图片的预览效果,便于调整和确认。 3. 裁剪操作:提供拖动、缩放等交互方式,让用户自由裁剪图片,满足特定尺寸或比例的要求。 4. 参数设置:开发者可以配置裁剪...

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

    《jQuery图片上传按比例预览插件解析与应用》 在网页开发中,用户上传图片时,为了提供良好的用户体验,通常需要在提交前预览图片,确保图片尺寸符合要求并保持原始比例。jQuery图片上传按比例预览插件就是解决这一...

    基于jquery的图片裁剪插件

    基于jQuery的图片裁剪插件为此提供了便利,它允许用户在浏览器中预览并裁剪图片,然后以所需尺寸上传。本文将深入探讨此类插件的核心原理、应用场景以及如何实现。 ### 1. jQuery框架基础 jQuery是一个广泛使用的...

    JQUERY文件图片上传插件 带预览功能 上传缓冲条

    这个jQuery插件就弥补了这些不足,为图片上传过程提供了友好的界面和流畅的体验。 预览功能是此插件的一大亮点。在用户选择图片后,插件可以在上传之前显示所选图片的预览,这样用户可以在上传前检查图片的质量和...

    jquery实现的图片裁剪插件

    在本文中,我们将深入探讨基于jQuery的图片裁剪插件,这是一种广泛应用于Web开发中的工具,用于实现用户交互式的图片裁剪功能。jQuery是JavaScript的一个轻量级库,它简化了DOM操作、事件处理和动画制作,使得创建...

    基于Jquery的图片预览插件

    **基于Jquery的图片预览插件** 在Web开发中,图片预览是一个常见的需求,尤其是在用户上传图片或浏览相册时。Jquery作为一个轻量级、高性能的JavaScript库,提供了丰富的API和便利的插件机制,使得实现图片预览功能...

    jsp+jquery(jcrop)实现的图片预览剪切上传

    本项目结合了这两者,并引入了`jCrop`插件,实现了图片预览、剪切和上传的功能,对于用户友好的图像管理界面有着重要的意义。 `jsp`是基于Java的服务器端脚本语言,它允许开发者在HTML页面中嵌入Java代码,从而动态...

    cropzoom_jQuery插件_上传头像裁剪_asp.net_php

    《cropzoom_jQuery插件:实现高效上传头像裁剪功能》 在现代网页开发中,用户界面的交互性越来越重要,特别是在涉及到个人形象展示的环节,如上传头像。`cropzoom`是一款专为jQuery设计的插件,它允许用户在上传...

    支持移动手机的响应式图片剪裁jQuery插件

    综上所述,rcrop是一款强大的、适应移动设备的响应式图片剪裁jQuery插件,它提供了用户友好的界面和灵活的配置选项,能够满足各种图片剪裁需求。通过合理利用rcrop,开发者可以提升用户体验,打造更加专业且易用的...

    jquery图片预览与裁剪

    在IT行业中,图片预览和裁剪是网页开发中常见的功能,尤其在用户需要上传图片时,这样的功能显得尤为重要。"jQuery图片预览与裁剪"是一个针对多种浏览器实现的解决方案,包括火狐、IE6至9、谷歌以及世界之窗等主流...

    PHP+jQuery上传图片并裁切的界面预览

    在图片上传并预览的功能中,jQuery可以监听文件输入元素的变化,读取用户选择的文件,然后使用FileReader API实时预览图片。通过`$(document).on('change', 'input[type=file]', function() {...})`这样的代码,可以...

    Jquery图片裁剪插件

    在IT行业中,jQuery图片裁剪插件是一种广泛应用于网页端的图像处理工具,它使得用户在前端就能方便地对上传的图片进行裁剪,以适应不同的应用场景,如头像设置、产品图片展示等。本篇将详细介绍jQuery图像上传裁剪...

    jQuery头像裁剪插件 支持自定义上传图片

    jQuery头像裁剪插件是一种常用的前端开发工具,主要用于用户在网页上自定义上传并裁剪图片,以创建个性化的头像或者其他需要裁剪的图像。这种插件通常结合了HTML、CSS和JavaScript(尤其是jQuery库)技术,为用户...

    jquery图片裁剪插件

    在实际项目中,jQuery图片裁剪插件广泛应用于用户头像修改、商品图片上传等场景。例如,在电商网站上,用户可以上传产品图片并自行裁剪以适应商品展示的需求;在社交网络中,用户可以裁剪自拍照片作为头像,确保图片...

    简单实用的jQuery多尺寸图片上传预览代码.zip

    这个“简单实用的jQuery多尺寸图片上传预览代码”是一个针对网页图片上传功能的解决方案,尤其适用于需要在用户上传前预览不同尺寸图片的应用场景。 首先,我们来看`index.html`。这是项目的主页面,它包含了HTML...

    PHP+jQuery制作的图片上传裁剪程序源码

    - **JQuery插件**:很可能使用了如jQuery Cropper这样的插件,它提供了一套完整的前端图片裁剪解决方案,包括拖动、缩放、旋转等操作。 - **坐标与尺寸**:用户在前端选定的裁剪区域会生成相应的坐标和宽高,这些...

    JQuery插件开发 + 插件

    1. 图像预览:在用户选择图片后,显示预览并提供拖动、缩放等操作。 2. 裁剪区域选择:用户可以通过拖动边框或调整大小来确定裁剪区域。 3. 确定裁剪:用户确认裁剪区域后,插件会截取选定区域并提供数据或直接更新...

Global site tag (gtag.js) - Google Analytics