简单实现图片上传预览

简单实现图片上传预览
第一：引入 placeImage.js。

第二：对应的 id。

第三：效果如下：

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'&&ext!='gif'){alert("图片的格式必须为 png 或者 jpg 或者 jpeg 格式或者 gif 格式！"); 
             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;
 }

}

更多技术资讯可关注：gzitcast