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

js部分是这样的:

//**********************图片上传预览插件************************
//作者：IDDQD(2009-07-01)
//Email：[e-mail]
//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  

谢谢分享 解决了 我的问题