出于安全的考虑，现在的浏览器都不允许...src = file:///...这样的写法，作为替代，IE可以使用“DXImageTransform.Microsoft.AlphaImageLoader”滤镜的方式，而Firefox则提供了一个getAsDataURL方法。
<html>
02 <head>
03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04 <title>preview</title>
05 <style>
06 #preview {
07 width: 270px;
08 height: 129px;
09 }
10 </style>
11 <!--[if IE]>
12 <style>
13 #preview {
14 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
15 }
16 </style>
17 <![endif]-->
18 </head>
19
20 <body>
21 <input id="file" type="file" />
22 <div id="preview">
23 <img id="image" src="http://www.baidu.com/img/baidu_logo.gif" />
24 </div>
25 <script>
26 document.getElementById("file").onchange = function() {
27 if ("Microsoft Internet Explorer" == navigator.appName) {
28 var preview = document.getElementById("preview");
29 preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = this.value;
30 document.getElementById("image").style.display = "none";
31 } else if ("Netscape" == navigator.appName){
32 document.getElementById("image").src = this.files[0].getAsDataURL();
33 } else {
34 alert("Not Support!");
35 }
36 }
37 </script>
38 </body>
39 </html>
分享到：
相关推荐
在选择本地图片文件并确定后，生成预览。同时，会对选择的图片格式进行过滤，如果不是图片格式的文件，会显示提示信息。
本地预览图片，js写的，可以添加、删除图片，本地预览图片，，
主要为大家详细介绍了基于JavaScript实现本地图片预览的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是...
vue 2.5.2 版本 vue组件 实现点击预览大图功能，点击下载图片功能（不兼容IE，适用于PC端） 内部代码可实现点击图片旋转效果，在本处无用，故注释掉，如有需要可打开调整.
分为两步：当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL（对象URL）；把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来。 在这里，我们需要了解Javascript里File对象、...
html5以及jQuery实现本地图片上传前的预览代码实例讲解 html5以及jQuery实现本地图片上传前的预览，效果类似如下： 选择图片前的页面： 选择图片之后的预览效果： 下面直接上代码（只是最简单的实现代码，css...
主要介绍了JavaScript实现图片本地预览功能,针对非IE浏览器的HTML5滤镜功能及IE浏览器的相关组件功能实现不上传至服务器预览本地图片的效果,需要的朋友可以参考下
主要介绍了JavaScript实现预览本地上传图片功能,结合完整实例形式分析了javascript图片预览相关的格式正则验证、浏览器判断、页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
layui的cropper裁剪插件，图片采集，用于在线裁剪图片生成,无须上传在线预览裁剪图片。
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是...
在 IE6 中，可以很方便地利用 img 的 src 属性，实现本地图片预览，然而在 IE7 中，这种办法却行不通。需要用 AlphaImageLoader
javascript 上传并预览图片（兼容IE，6,7,8,9+,谷歌,火狐,Safari）移动端也可以。
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 本实例通过JavaScript实现图片预览效果，代码很简单，可支持IE和火狐！
主要介绍了JS+HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下
当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL（对象URL）； 把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来。 在这里，我们需要了解Javascript里File对象、Blob对象和...