IE8选图片显示预览图效果

48 篇文章 0 订阅
3 篇文章 0 订阅
坑点
  1. IE8不能获取到inputd的files对象
  2. IE8设置本地图片地址为src后,有的图显示,有的图不显示(未探索具体原因)
解决办法

支持files对象的就用base64的方法(不要问我为什么要用base64,最先想到的就是base64)
不支持的就通过滤镜方式来实现

界面HTML代码
<input type="file" id="fileUpload">
<div id="img2" style="width:600px;height:300px">
</div>
<img id="img" src="" width="600" height="300"/>
相应js
$("#fileUpload").change(function (e) {
    //支持360和chrome
    if (this.files) {
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file); //调用自带方法进行转换  
        reader.onload = function (e) {
            $("#img").attr("src", this.result); //将转换后的编码存入src完成预览 
        };
    } else {
        //兼容IE8
        document.getElementById("fileUpload_shopask").select();  //选中FileUpload控件中的文本         
        var path = document.selection.createRange().text;
        document.getElementById("img2").innerHTML = "";
        document.getElementById("img2").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='" + path + "')";

    }
    changeImg(this.files)
});
function changeImg(flag) {
    //true表示支持files,显示img,不支持时显示img2
    $("img").css("display", flag ? '' : 'none');
    $("img2").css("display", flag ? 'none' : '');
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值