jquery 本地图片浏览

jquery 本地图片浏览(支持ie7，8)

 

// 本地图片浏览，此插件依赖 JCrop 切图插件
jQuery.fn.extend({
    avatarPreview: function (opts) {
        var _self = this, _this = $(this), _jcrop;
        opts = jQuery.extend({
            imgId: "avatarImg", squareSide: 500, imgType: ["gif", "jpeg", "jpg", "png"], callback: function () {
                return;
            }
        }, opts || {});
        _self.isIE = function () {
            var _ua = navigator.userAgent.toLowerCase();
//            ie6mode = /msie [1-6]\./.test(_ua);
            return /msie/.test(_ua);
        };
        _self.getFileURL = function (fileObj) {
            var url;
            if (_self.isIE()) {
                _self.select();
                _self.blur();
                url = document.selection.createRange().text;
                document.selection.empty();
            } else if (window.createObjectURL != undefined) {
                url = window.createObjectURL(fileObj.files[0])
            }
            else if (window.URL != undefined) {
                url = window.URL.createObjectURL(fileObj.files[0])
            }
            else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(fileObj.files[0])
            }
            return url
        };
        _self.uploadJcrop = function (imgObj) {
            imgObj.Jcrop({
                aspectRatio: 1,
                setSelect: [0, 0, 280, 280],
                minSize: [100, 100],
                onSelect: this.onChange,
                onChange: function (coords) {
                    $('#user_crop_x').val(coords.x);
                    $('#user_crop_y').val(coords.y);
                    $('#user_crop_w').val(coords.w);
                    $('#user_crop_h').val(coords.h);

                }
            }, function () {
                return _jcrop = this
            });
        };
        _self.removeOldJcrop = function () {
            if (_jcrop) {
                _jcrop.destroy();
            }
        };
        _this.getStyle = function (obj) {
            if (obj == undefined) return 'height:' + opts.squareSide + 'px;width:' + opts.squareSide + 'px;'
            if (obj.height > obj.width) {
                var imgStyle = 'height:' + opts.squareSide + 'px;width:auto';
            } else {
                var imgStyle = 'width:' + opts.squareSide + 'px;height:auto'
            }
            return imgStyle
        };
        _this.getStyleForIE = function (imgTag, imageUrl) {
            var testDiv = document.createElement("div");
            imgTag.after(testDiv).hide();
            testDiv.style.width = "10px";
            testDiv.style.height = "10px";
            testDiv.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);';
            testDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imageUrl;
            var imgStyle, scaling, height = parseFloat(testDiv.offsetHeight), width = parseFloat(testDiv.offsetWidth);
            if (height > 0 && width > 0) {
                if (width >= height) {
                    imgStyle = 'width:500px; height:' + 500 * height / width + 'px';
                } else {
                    imgStyle = 'height:500px; width:' + 500 * width / height + 'px';
                }
            }
            $(testDiv).remove();
            return imgStyle;
        };
        _this.change(function () {
            if (this.value) {
                if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                    alert("请选择" + opts.imgType.join("、") + '类型的图片。');
                    this.value = "";
                    return false
                }
                _self.removeOldJcrop();
                var imgTag = $("#" + opts.imgId);
                if (imgTag.length > 0) {
                    var imageUrl = _self.getFileURL(this);
                    if (_self.isIE()) {
                        var _div = $('<div id="ieImg"></div>');
                        _div.attr('style', _this.getStyleForIE(imgTag, imageUrl)).css({"filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='" + imageUrl + "')"});
                        imgTag.attr('src', '').hide().after(_div);
                        _self.uploadJcrop(_div);
                    } else {
                        $("<img/>").attr("src", imageUrl).load(function () {
                            imgTag.attr('src', imageUrl).attr('style', _this.getStyle(this));
                            _self.uploadJcrop(imgTag);
                        });
                    }
                    opts.callback();
                }
            }
        })
    }
});

 ## IE9
  function  PreviewImg(imgFile){  
   var  oldPreview  =  document.getElementById( "oldPreview" );  
   oldPreview.innerHTML  =  "<img src=\"file:\\\\" + imgFile.value +  "\" /> ";     
  }