大家好,请问这几行简短的代码,如何兼容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.我对前端不太熟.
谢谢了!
最佳答案
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直接可用， 参考：
收获园豆：20
太完美 了.谢谢
其他回答(1)
0
filereader 算html5才有的吧,这样通过 先上传图片然后到服务器上,将保存的图片的路径拿回来,在去显示的,可以用swfupload之类的插件来做的
