/// <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>