html上传预览图片原理,关于html中图片上传预览的实现

functionchange() {varpic=document.getElementById("preview"),

file=document.getElementById("f");//得到后缀名

varext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();//gif在IE浏览器暂时无法显示

if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){

alert("图片的格式必须为png或者jpg或者jpeg格式！");return;

}varisIE=navigator.userAgent.match(/MSIE/)!= null,

isIE6=navigator.userAgent.match(/MSIE 6.0/)!= null;

if(isIE) {

file.select();

var reallocalpath = document.selection.createRange().text;

// IE6浏览器设置img的src为本地路径可以直接显示图片

if (isIE6) {

pic.src = reallocalpath;

}else {

// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现

pic.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src="" +reallocalpath+ "")";//设置img的src为base64编码的透明图片 取消显示浏览器默认图片

pic.src= 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';

}

}else{

html5Reader(file);

}

}functionhtml5Reader(file){varfile=file.files[0];varreader= newFileReader();

reader.readAsDataURL(file);

reader.οnlοad= function(e){varpic=document.getElementById("preview");

pic.src=this.result;

}

}