使用Javascript预览本地图片

最新推荐文章于 2021-01-25 09:56:20 发布

原创最新推荐文章于 2021-01-25 09:56:20 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #IE #Microsoft #Firefox #浏览器 #ViewUI

web basic 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种兼容IE和Firefox等浏览器的本地文件图片预览解决方案，利用IE的DXImageTransform滤镜和Firefox的getAsDataURL方法实现跨浏览器的图片预览功能。

出于安全的考虑，现在的浏览器都不允许...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 
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>