input file图片预览兼容ie8+

<!DOCTYPE>
<html>
<head>
    <title></title>
</head>
<body>
<div id="imgdiv"><img id="imgShow" width="200"/></div>
<form action="" id="form1">
<input type="file" id="up_img"/></form>
<div id="del">删除</div>
<script src="../js/libs/jquery-1.11.3.min.js"></script>
<script>
    window.onload = function () {
        new uploadPreview({UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow"});
    };
    var uploadPreview = function (setting) {   /*   *work:this(当前对象)   */
        var _self = this;
        /*   *work:判断为null或者空值   */
        _self.IsNull = function (value) {
            if (typeof (value) == "function") {
                return false;
            }
            if (value == undefined || value == null || value == "" || value.length == 0) {
                return true;
            }
            return false;
        }
        /*   *work:默认配置   */
        _self.DefautlSetting = {
            UpBtn: "",
            DivShow: "",
            ImgShow: "",
            Width: 100,
            Height: 100,
            ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
            ErrMsg: "选择文件错误,图片类型必须是(gif,jpeg,jpg,bmp,png)中的一种",
            callback: function () {
            }
        };
        /*   *work:读取配置   */
        _self.Setting = {
            UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn : setting.UpBtn,
            DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow : setting.DivShow,
            ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow : setting.ImgShow,
            Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width : setting.Width,
            Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height : setting.Height,
            ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType : setting.ImgType,
            ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg : setting.ErrMsg,
            callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback
        };
        /*   *work:获取文本控件URL   */
        _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;
        }
        /*   *work:绑定事件   */
        _self.Bind = function () {
            document.getElementById(_self.Setting.UpBtn).onchange = function () {
                if (this.value) {
                    if (!RegExp("\.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                        alert(_self.Setting.ErrMsg);
                        this.value = "";
                        return false;
                    }
                    if (navigator.userAgent.indexOf("MSIE") > -1) {
                        try {
                            document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
                        } catch (e) {
                            var div = document.getElementById(_self.Setting.DivShow);
                            this.select();
                            top.parent.document.body.focus();
                            var src = document.selection.createRange().text;
                            document.selection.empty();
                            document.getElementById(_self.Setting.ImgShow).style.display = "none";
                            div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                            div.style.width = _self.Setting.Width + "px";
                            div.style.height = _self.Setting.Height + "px";
                            div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
                        }
                    } else {
                        document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
                    }
                    _self.Setting.callback();
                }
            }
        };
        /*   *work:执行绑定事件   */
        _self.Bind();
    };
    $('#del').click(function () {
        $('#imgdiv').hide();
    })
    $('#up_img').change(function () {
        $('#imgdiv').show();
        $('#form1')[0].reset();
    })
</script>
</body>
</html>
input file图片预览 兼容ie8+

猜你喜欢

input file图片预览兼容ie8+
