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;

}

}

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html上传预览图片原理,关于html中图片上传预览的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。