JS相容各個瀏覽器的本地圖片上傳即時預覽效果
阿新 • • 發佈:2019-02-15
function change() { var pic = document.getElementById("preview"), file = document.getElementById("f"); var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase(); // gif在IE瀏覽器暫時無法顯示 if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){ alert("圖片的格式必須為png或者jpg或者jpeg格式!");return; } var isIE = 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); } } function html5Reader(file){ var file = file.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ var pic = document.getElementById("preview"); pic.src=this.result; } }