input file图片预览兼容ie8+

来源：互联网发布：中国程序员网编辑：程序博客网时间：2024/06/04 18:04
<!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>
阅读全文
0 0
input file图片预览 兼容ie8+

input file图片预览兼容ie8+
