<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图片上传预览,兼容IE</title> <style> div { width: 400px; height: 400px; } img { width: 100%; } </style> </head> <body> <input type="file" id="file"> <div> <img src="" alt="" id="img"> h5浏览器的显示 </div> <div id="img_div"> IE的渲染盒子 </div> <script> var file = document.getElementById('file') var img = document.getElementById('img') var img_div = document.getElementById('img_div') file.onchange = function(e) { try { //创建一个FileReader对象 var reader = new FileReader(); //读取file文件; reader.readAsDataURL(file.files[0]); //当文件读取成功后,将结果保存到url变量里; reader.onload = function(evt) { var url = evt.target.result; img.src = url; } } catch (error) { file.select(); var path = document.selection.createRange().text // 获取图片的本地路径 img_div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" +path + "\")"; // 语法格式:filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) // enabled:可选项,布尔值(Boolean)。设置或检索滤镜是否激活。 true:默认值。滤镜激活。 false:滤镜被禁止。 // sizingMethod:可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 // 1)crop:剪切图片以适应对象尺寸。 // 2)image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 // 3)scale:缩放图片以适应对象的尺寸边界。 // src:必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。 } } </script> </body> </html>