简单实现图片上传预览

简单实现图片上传预览
第一：引入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