jquery本地上传预览扩展(隐藏上传控件单击图片上传支持ie!!)

/// <reference path="../../Js/jquery-1.7.2.min.js" />/**使用方法:  !!!!!!!!请把input放在图片上方<div><input type="file" id="up" /><img id="ImgPR" width="120" height="120" /></div>把需要进行预览的IMG标签外 套一个div 然后给上传控件id给予uploadPreview 然后调用CheckInito 然后点击图片就行了$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }}).CheckInito();var p=$("fff").uploadPreview({});p.checkFile() //立即弹出file选择文件对话框 ie不适合*/$.fn.extend({    uploadPreview: function (opts) {        var _self = this,            _this = $(this);        opts = jQuery.extend({            Img: "ImgPr",            Width: 100,            Height: 100,            ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],            Callback: function () { }        }, opts || {});        _self.getObjectURL = function (file) {            var url = null;            if (window.createObjectURL != undefined) {                url = window.createObjectURL(file)            } else if (window.URL != undefined) {                url = window.URL.createObjectURL(file)            } else if (window.webkitURL != undefined) {                url = window.webkitURL.createObjectURL(file)            }            return url        };        _this.change(function () {            if (this.value) {                if (!RegExp("/.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {                    alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种");                    this.value = "";                    return false                }                var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;                if (ie) {                    try {                        $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))                    } catch (e) {                        var src = "";                        var obj = $("#" + opts.Img);                        var div = obj.parent("div")[0];                        _self.select();                        if (top != self) {                            window.parent.document.body.focus()                        } else {                            _self.blur()                        }                        src = document.selection.createRange().text;                        document.selection.empty();                        obj.hide();                        obj.parent("div").CSS({                            'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',                            'width': opts.Width + 'px',                            'height': opts.Height + 'px'                        });                        div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src                    }                } else {                    $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))                }                opts.Callback()            }        })        return {            /*ie不适用！*/            checkFile: function CheckFile() {                var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;                if (ie) {                    _this[0].click();                } else {                    var mouSEObj = document.createEvent("MouseEvents");                    mouseobj.initEvent("click", true, true);                    _this[0].dispatchEvent(mouseobj);                }                return _self;            },            //兼容ie8的            CheckInito: function () {                var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;                _this.css("position", "absolute");                _this.parent().css("width", opts.Width + "px");                _this.parent().css("height", opts.Height + "px");                if (ie) {                    //width: 67.5px; height: 37.4px; padding-right: 5px; position: absolute; opacity: 1;                    _this.css("width", opts.Width + "px");                    _this.css("height", opts.Height + "px");                    _this.css("font-size", "200px");                    _this.css("overflow", "hidden");                } else {                    _this.css("left", "0px");                    _this.css("top", "0px");                    _this.css("width", opts.Width + "px");                    _this.css("height", opts.Height + "px");                }                _this.css("opacity", "0");                return _self;            }        };    }});

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script src="Js/jquery-1.7.2.min.js"></script>    <script src="Admin/js/uploadPreview.js"></script>    <script>        function loadOver() {            $("#myselfpicFile").uploadPreview({ Img: "myselfpic", Width: 150, Height: 180 }).CheckInito();        }    </script></head><body onload="loadOver();">    <div class="photo">        <input id="myselfpicFile" type="file" name="myselfpic" />        <img width="150" height="180" id="myselfpic" class="" src="../$obj.myselfpic" />    </div></body></html>