兼容全浏览器的本地图片预览

为了实现浏览器本地图片预览功能，我使用了三种方式：

1. 通过HTML5的FileApi 获取文件列表，然后转换成base64编码。

2. 使用IE的滤镜来规避IE高版本的安全性检测。

3. 最粗暴的方式，获取File文件域的value值。

-----------------------------------------------------------------------

下面贴代码：

 1   ;(function(root){
 2 
 3     function ImagePreview(params){
 4             
 5         var _this = this;
 6 
 7         this.file = document.getElementById(params.dom);
 8         this.imgbox = document.getElementById(params.obj);
 9         this.img = new Image();
10 
11         this.file.onchange=function(){
12             _this.core(this);
13         }
14     }
15 
16     ImagePreview.prototype.core=function(t){
17         var _this = this;
18         if(window.FileReader){
19 
20             var fileReader = new FileReader();
21             fileReader.readAsDataURL(t.files[0]); 
22             fileReader.onload=function(e){ 
23                 var ev = e || window.event;
24                 _this.img.src = ev.target.result; 
25 
26             }
27         }else if(document.all){
28 
29             if(!-[1,] && !window.XMLHttpRequest){ 
30                 this.img.src = t.value;
31             }else{
32                 t.select();
33                 t.blur();
34                 var imgurl = document.selection.createRange().text;
35 
36                 this.imgbox.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = "scale",src="'+ imgurl +'")'; 
37                 return false;
38             }
39 
40         }else{
41 
42             if(this.file.files){  
43                 var url = this.file.files[0].getAsDataURL() 
44                 this.img.src = url;
45             }else{ 
46                 this.img.src = t.value;
47             }
48 
49         }
50 
51         this.imgbox.appendChild(this.img);
52     }
53 
54     root.ImagePreview=function(p){
55         new ImagePreview(p);
56     }
57 
58 })(window)

调用方式：

ImagePreview({'dom':'file','obj':'imagebox'});

说明：*file 是 input:file的id。

　　 *obj 是要显示图片位置的id值。