问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在IE8上兼容filereader对象

头像
孤风玄烨
    18661924

    如题，本人想实现一个图片上传之前的预览效果，明白可以用fileReader对象来实现,但是IE8上却不支持,请问有什么兼容性的方案吗？
    目前我有两种想法,一种是检测浏览器的版本,如果版本过低的话,就提示用户升级浏览器,但这是万不得已的做法,还有一种方案就是上传图片时,一旦input[type=file]里的内容发生变化,就直接把图片传给后台,然后后台把该图片在服务器上的src地址返回给我,我把这个src插进img标签内,实现一个预览效果,但我感觉这样向后台发送请求太频繁了,用户都还没上传图片只是预览一下，我却要像后台发送请求。。
    请问还有什么更好的解决方案吗？
    谢谢！

    javascripthtmlhtml5
    阅读 19.1k
    2 个回答
    得票最新
    头像
    cd150505
      1.1k368
      头像
      米女巫
        235149
        <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js图片上传预览</title>
    <script>
        function PreviewImage(imgFile)
        {
            var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
            filextension=filextension.toLowerCase();
            if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
            {
                alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
                imgFile.focus();
            }
            else
            {
                var path;
                if(document.all)//IE
                {
                    imgFile.select();
                    path = document.selection.createRange().text;
                    document.getElementById("imgPreview").innerHTML="";
                    document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用滤镜效果
                }
                else//FF
                {
                    path=window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上
                    //path = imgFile.files[0].getAsDataURL();// FF 3.0
                    document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";
                    //document.getElementById("img1").src = path;
                }
            }
        }
    </script>
</head>
<body>
<input type="file" onchange='PreviewImage(this)' />
<br />
<div id="imgPreview" style='width:120px; height:100px;'>
    <img id="img1" src="" width="120" height="100" />
</div>
</body>
</html>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题