上传图片预览,支持IE6

//说明:图片上传预览插件
//上传的时候可以生成固定宽高范围内的等比例缩放图

//参数设置:
//width                     存放图片固定大小容器的宽
//height                    存放图片固定大小容器的高
//imgDiv                    页面DIV的JQuery的id
//maxSize                    图片大小最大限制(K)
//imgType                   数组后缀名
//**********************图片上传预览插件*************************
(function ($) {
    jQuery.fn.extend({
        uploadPreview: function (opts) {
            opts = jQuery.extend({
                width: 0,
                height: 0,
                imgDiv: "#imgDiv",
                maxSize: 300,
                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);

            var version = parseInt($.browser.version, 10);

            autoScaling = function () {

                if (version == 7 || version == 8 || version == 9) 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 (version == 7 || version == 8 || version == 9) 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();
                }
            },

            createImg = function () {
                imgDiv.html('');

                var img = $("<img />");
                imgDiv.replaceWith(img);
                imgDiv = img;
            },

            _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 && version < 10) {

                        if (version == 6) {

                            var image = new Image();
                            image.onload = function () {
                                if ((image.fileSize / 1024) > opts.maxSize) {
                                    alert('图片大小不能超过' + opts.maxSize + 'K');
                                    return false;
                                }
                            }
                            image.src = 'file:///' + this.value;

                            createImg();
                            imgDiv.attr('src', image.src);
                            autoScaling();
                        } else {

                            this.select();
                            var img = document.selection.createRange().text;
                            var image = new Image();
                            image.onload = function () {
                                if ((image.fileSize / 1024) > opts.maxSize) {
                                    alert('图片大小不能超过' + opts.maxSize + 'K');
                                    return false;
                                }
                            }
                            image.src = img;

                            imgDiv.html('');
                            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 = img;
                            } catch (e) {
                                alert("无效的图片文件!");
                                return;
                            }

                            setTimeout("autoScaling()", 100);
                        }
                    }
                    else {
                        try {
                            var file = null;
                            var size = 0;
                            if (this.files && this.files[0]) {
                                file = this.files[0];
                                size = file.size;
                            } else if (this.files && this.files.item(0)) {
                                file = this.files.item(0);
                                size = file.fileSize;
                            }

                            if ((size / 1024) > opts.maxSize) {
                                alert('图片大小不能超过' + opts.maxSize + 'K');
                                return false;
                            }

                            createImg();

                            //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径
                            try {
                                //Firefox7.0 以下                                
                                imgDiv.attr('src', file.getAsDataURL());
                            } catch (e) {
                                //Firefox8.0以上                                
                                imgDiv.attr('src', window.URL.createObjectURL(file));
                            }

                            imgDiv.css({ "vertical-align": "middle" });
                            setTimeout("autoScaling()", 100);
                        } catch (e) {
                            //支持html5的浏览器,比如高版本的firefox、chrome、ie10
                            if (this.files && this.files[0]) {
                                if ((this.files[0].size / 1024) > opts.maxSize) {
                                    alert('图片大小不能超过' + opts.maxSize + 'K');
                                    return false;
                                }

                                var reader = new FileReader();
                                reader.onload = function (e) {
                                    imgDiv.attr('src', e.target.result);
                                };
                                reader.readAsDataURL(this.files[0]);
                                setTimeout("autoScaling()", 100);
                            }
                        };
                    }
                }
            });
        }
    });
})(jQuery);

HTML代码:

  <div style="width: 290px; height: 290px; overflow: hidden; border: 1px solid red;">
        <div id="imgDiv"></div>
    </div>
    <br>
    <input type="file" value="上传文件">

    <script>
        $(document).ready(function () {
            $("input").uploadPreview({ width: 290, height: 290, imgDiv: "#imgDiv" });
        });
</script>

 

posted @ 2016-01-18 17:55  编程猴子  阅读(291)  评论(0编辑  收藏  举报