选择图片后预览（不上传至后台）

这里实现图片预览的最大功臣是FileReader。
FileReader是H5的一个接口 ，和FormData差不多。平常我们是不能直接访问到本地的文件，就算路径是对的也无济于事，但是使用FileReader就可以了。

话不多说，直接上代码：
先在HTML 写个样式，大概这样子就行了

HTML代码大概是这样子

<div class="form-group col-md-12">
    <div class="pictureCont" id="pictureCont">
        <p>上传图片</p>
    </div>
</div>
<div class="form-group col-md-12 Picsubmit">
    <input type="file" name="headImg"  id="Picture"  placeholder="照片" accept="image/png, image/jpeg, image/gif, image/jpg">
</div>

部分CSS

    .pictureCont{width: 150px;height:150px;text-align:center;background-color: #fbfbfb;border: 1px solid #d1d1d1;}
        .pictureCont p{line-height: 150px;}
        .pictureCont img{width:150px;height:148px!important;}
        .Picsubmit input{display: inline-block;}
        #Picture{color:transparent;text-indent:-999999px;border:1px solid #d1d1d1;width:100px;height: 30px;outline:none;background-image: url(images/radio.png);cursor: pointer;}
    

这里在处理按钮的时候，使用了图片覆盖的方法，把自带的“丑陋”的按钮添加一件花衣裳。

js:

	var result = document.getElementById("pictureCont");
    var input = document.getElementById("Picture");
    function readFile(){
        var file = this.files[0];
        if(!/image\/\w+/.test(file.type)){
            alert("请检查图像格式");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
	    result.innerHTML = '<img src="'+this.result+'" alt=""/>'
        }
    }

有些年迈的浏览器不支持H5，这就造业了，不过为了避免报错等问题，最好还是判断一下浏览器支不支持。

if(typeof FileReader === 'undefined'){
        result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
        input.setAttribute('disabled','disabled');
    }else{
            input.addEventListener('change',readFile,false);
        }

关注公众号回复“资料”即可获得为您精心准备的前端视频学习资料