鼠标悬浮图片上,显示上传按钮，点击实现预览功能，支持多浏览器

<script>
    function previewImage(file) {
        //是否是图片文件
        var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase()
        if (ext != 'png' && ext != 'jpg' && ext != 'jpeg' && ext != 'gif' && ext != 'bmp') {

            alert("The format of the picture must be a PNG or JPG or jpeg or GIF or BMP format！");

            return;

        }

        var MAXWIDTH = 296;
        var MAXHEIGHT = 178;
        var div = document.getElementById('preview');
        if (file.files && file.files[0]) {
            //div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.onload = function () {
                //var rect = clacImgZoomParam(img.clientWidth, img.clientHeight, img.clientWidth, img.clientHeight);
                img.width = MAXWIDTH;
                img.height = MAXHEIGHT;
                img.style.marginLeft = '1px';
                img.style.marginTop = '1px';
            }
            var reader = new FileReader();
            reader.onload = function (evt) { img.src = evt.target.result; }
            reader.readAsDataURL(file.files[0]);
        }
        else {
            document.getElementById('imghead').style.display = "none";
            document.getElementById('imghead2').style.display = "block";
            //var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            //file.select();
            //var src = document.selection.createRange().text;
            //div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead2');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = file.value;
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').sizingMethod = "scale";
            //var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.clientWidth, img.clientHeight);
            //status = ('rect:' + 1 + ',' + 1 + ',' + rect.width + ',' + rect.height);
            //div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;margin-left:" + rect.left + "px;" + sFilter + src + "\"'></div>";
        }
    }
</script>
<style type="text/css">
    #preview span a.ui-input-file {
        margin: 0 0 0 0;
        margin-left: 130px;
        padding: 0;
        width: 28px;
        height: 28px;
        display: inline;
        position: absolute;
        overflow: hidden;
        cursor: pointer;
        background: #e5e3e3 url("/resources/images/button_browse.png") no-repeat;
        border: none;
        text-decoration: none;
    }

    #preview span {
        text-align: center;
        position: absolute;
        width: 296px;
        padding: 0px;
        height: 28px;
        left: 0px;
        bottom: 20px;
        color: #FFF;
        font-family: '宋体';
        font-size: 12px;
        line-height: 20px;
        background: url(/resources/images/pic_show_bg.png);
        bottom: 0;
        border-radius: 10px;
    }
</style>
<div style="width: 30%; position: relative; margin: 10px 10px;" id="preview">
    <div id="imghead2" style="width: 296px; height: 178px; display: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=);"></div>
    <img src="~/Files/LILogo/@Model.iiClassListModel.Logo" width="296px" height="178px" id="imghead" style="border-radius: 10px; border: 1px solid #cccccc;" />
    <span>
        <input id="f" type="file" name="f" οnchange="previewImage(this)" />
        <div class="upload"></div>
        <input type="hidden" id="hidLogo" name="hidLogo" />
    </span>

</div>

补充：ie11文档模式切换为ie8时无法实现预览，有高手可以多多指教