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

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

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

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

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

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

下面贴代码：

  ;(function(root){

    function ImagePreview(params){
            
        var _this = this;

        this.file = document.getElementById(params.dom);
        this.imgbox = document.getElementById(params.obj);
        this.img = new Image();

        this.file.onchange=function(){
            _this.core(this);
        }
    }

    ImagePreview.prototype.core=function(t){
        var _this = this;
        if(window.FileReader){

            var fileReader = new FileReader();
            fileReader.readAsDataURL(t.files[0]); 
            fileReader.onload=function(e){ 
                var ev = e || window.event;
                _this.img.src = ev.target.result; 

            }
        }else if(document.all){

            if(!-[1,] && !window.XMLHttpRequest){ 
                this.img.src = t.value;
            }else{
                t.select();
                t.blur();
                var imgurl = document.selection.createRange().text;

                this.imgbox.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = "scale",src="'+ imgurl +'")'; 
                return false;
            }

        }else{

            if(this.file.files){  
                var url = this.file.files[0].getAsDataURL() 
                this.img.src = url;
            }else{ 
                this.img.src = t.value;
            }

        }

        this.imgbox.appendChild(this.img);
    }

    root.ImagePreview=function(p){
        new ImagePreview(p);
    }

})(window)

 

调用方式：

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

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

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