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

这里实现图片预览的最大功臣是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);        }