IE8选图片显示预览图效果

坑点

  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' : '');
}

你可能感兴趣的:(实用,学习,javascript)