首页 新闻 搜索 专区 学院

大家好,请问这几行简短的代码,如何兼容IE8呢?

0
悬赏园豆:20 [已解决问题] 解决于 2015-08-11 11:00

下边的代码是做一个上传前图片预览的功能,在FF,chrome上没有问题.

可是到了IE8下就有问题了.

代码如下:

<html>
<head>
    
    <script type="text/javascript">

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    document.getElementById('imgView').src= e.target.result;
                };

                reader.readAsDataURL(input.files[0]);
            }
        }


    </script>
</head>

<body>
    <img id="imgView" width="120px" height="120px" alt="预览" src="../Images/Image.jpg" />
    <input type="file" id="file" onchange="readURL(this);" />
</body>

</html>

 

先是input 找不到files属性,

其次 FileReader类型IE也识别不了.

 

请问:

1,都是js代码啊,为什么同样的控件,IE8下就没有这些属性和类呢?是FF和chrome厂商给js加的这些属性吗?

 

2,如何将上边的代码改为兼容IE8.我对前端不太熟.

 

谢谢了!

hexllo的主页 hexllo | 菜鸟二级 | 园豆:405
提问于:2015-08-08 18:12
< >
分享
最佳答案
0
 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2  
 3 <head id="Head1">
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <style type="text/css">
 6     .image_container {
 7         width: 360px;
 8         height: 300px;
 9         position: relative;
10     }
11     </style>
12   <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
13     <script language="javascript">
14     $(function() {
15         $("#file_upload").change(function() {
16             var $file = $(this);
17             var fileObj = $file[0];
18             var windowURL = window.URL || window.webkitURL;
19             var dataURL;
20             var $img = $("#preview");
21  
22             if(fileObj && fileObj.files && fileObj.files[0]){
23                 dataURL = windowURL.createObjectURL(fileObj.files[0]);
24                 $img.attr('src',dataURL);
25             }else{
26                 dataURL = $file.val();
27  
28                 // $img.css("filter",'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src="' + dataURL + '")');
29  
30                 // var imgObj = document.getElementById("preview");
31                 // imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\"" + dataURL + "\")";
32                 // imgObj.style.width = "48px";
33                 // imgObj.style.height = "48px";
34  
35                 var imgObj = document.getElementById("preview");
36                 // 两个坑:
37                 // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
38                 // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
39                 imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
40                 imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
41              //    console.log("loadingComplate");
42              // alert("预览完成");
43             }
44         });
45     });
46     </script>
47 </head>
48 <body>
49     <div id="demo">
50         <input id="file_upload" type="file" />
51         <div class="image_container">
52             <img id="preview" width="360" height="300">
53         </div>
54     </div>
55 </body>
56 </html>

此代码本人亲测复制保存为html直接可用, 参考:

前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome

收获园豆:20
键盘上的牛仔 | 初学一级 |园豆:30 | 2015-08-10 16:35

太完美 了.谢谢

hexllo | 园豆:405 (菜鸟二级) | 2015-08-11 11:01
其他回答(1)
0

filereader 算html5才有的吧,这样通过 先上传图片然后到服务器上,将保存的图片的路径拿回来,在去显示的,可以用swfupload之类的插件来做的

秋壶冰月 | 园豆:5450 (大侠五级) | 2015-08-09 22:32
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册