<!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>