1. 程式人生 > >JS相容各個瀏覽器的本地圖片上傳即時預覽效果

JS相容各個瀏覽器的本地圖片上傳即時預覽效果

複製程式碼
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; } }