js前台实现上传图片的预览

网上这样的插件一大堆，不过还是谈下js下代码的实现，加深这方面的理解。

当然也没有一种方式就可以完事的情形，主要就两种方面来处理；

1、file API的filereader接口完成（支持的浏览器：Internet Explorer: 10+ Firefox: 10+ Chrome: 13+ Opera: 12+ Safari: partial）

function show(obj_input){

var files = this.files;
var file = files[0];

var reader = new FileReader(), htmlImage;

reader.onload = function(e) {

htmlImage = '<img src="'+ e.target.result +'" id="image"/>'; // 这里e.target.result就是base64编码

document.innerHTML=htmlImage;

var img=document.getElementById('image');

img.onload=function(){
         img.style.width=220+"px";
    img.style.height=120+"px";
}

}

reader.readAsDataURL(file);//以DataURL格式读取文件内容
} 

这个方面网址（https://segmentfault.com/a/1190000002786372）上面的介绍得比较详细，可以参考一下。

2、ie低版本用ie滤镜完成

function show(obj_input){

//obj_input文件上传控件对象,obj_img图像对象,preview_div预览图装载div对象

obj_input.select();

obj_input.blur();//让上传控件失去焦点，以免ie的安全机制拒绝document.selection.createRange().text的访问
//还有一种情况是，如果当前页面被嵌在框架中，则fileImg.blur()之后，file控件中原本被选中的文本将会失去选中的状态，因此，不能使用fileImg.blur()。
可以让当前页面上的其他元素，如div，button等获得焦点即可，如div_view.focus()，或者直接用window.parent.docuemnt.body.focus().
var src = document.selection.createRange().text;

var div_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + src + "')";  
            var img_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='" + src + "')";  

document.selection.empty();

obj_img.style.filter = img_sFilter;  
 
obj_img.style.display = "none";

obj_img.style.width = "100%";  

obj_img.style.height = "100%"; 

preview_div.style.width = 220 + 'px';
  
preview_div.style.height = 120 + 'px'; 
 
preview_div.style.filter = div_sFilter;
}

ie6、7、8都可以用滤镜的方式完成预览。