IE8选图片显示预览图效果

怼烎@ 2022-05-25 04:54 213阅读 0赞

#### 坑点 ####

1.  IE8不能获取到`input`d的`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' : '');
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，213人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app 视频实现显示预览图

src视频路径为在线路径才可以 <video :src="src" controls :poster="src+'?x-oss-process=video/snap

矫情吗；*/ 2023年01月22日 10:52/ 0 赞/ 5 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 478 阅读

相关图片上传显示进度条和预览图的前端实现之预览图篇

上一集我们说到了进度条的实现，之后就鸽了很久，终于到写这一篇的时候了，说到底一方面是自己太忙，第二方面是自己太懒了。在图片未上传完成之前不可能拿到上传后返回的uri通过线上

Dear 丶/ 2022年06月14日 02:12/ 0 赞/ 697 阅读

相关 HTML选择图片直接预览效果

直接上代码 <!DOCTYPE html> <html> <head> <meta name="viewport" cont

超、凢脫俗/ 2022年05月30日 04:18/ 0 赞/ 266 阅读

相关 IE8 上传图片预览（兼容）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

Love The Way You Lie/ 2022年05月29日 12:22/ 0 赞/ 264 阅读

相关 IE8选图片显示预览图效果

坑点 1. IE8不能获取到`input`d的`files`对象 2. IE8设置本地图片地址为src后，有的图显示，有的图不显示（未探索具体原因）解决办法

怼烎@/ 2022年05月25日 04:54/ 0 赞/ 214 阅读

相关 jQuery实现上传图片时，显示图片预览效果

代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

╰+攻爆jí腚メ/ 2022年05月24日 12:27/ 0 赞/ 344 阅读

相关深入浅出JQuery (三) 图片预览效果

1.在每次学习相同的内容时都会有不同的理解，就好像我们每次从同一个地方走过的感觉的不同的一样，JQuery只是JavaScript框架中的一种，在层层众生当中脱颖

蔚落/ 2022年03月27日 04:47/ 0 赞/ 202 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 686 阅读

相关 uniapp 实现图片预览单图预览和多图预览

uniapp 实现图片预览单图预览和多图预览关键点就是调用 uni.previewImage({ current: index,

落日映苍穹つ/ 2021年09月02日 03:18/ 0 赞/ 2352 阅读