图片预览，格式确认

<img src="" alt="" id="preview" > 
<input type="file" id="imgPicker" name="file" > 
<span >点击上传</span>

<script>
document
    .querySelector('#imgPicker')
    .addEventListener('change', function(){
     
     var _file=document.getElementById("imgPicker");
       var i=_file.value.lastIndexOf('.');
       var len=_file.value.length;
       var extEndName=_file.value.substring(i+1,len);
       var extName="GIF,BMP,JPG,JPEG,PNG,BNG";//首先对格式进行验证
       if(extName.indexOf(extEndName.toUpperCase())==-1){
     //filemessage.innerHTML="*您只能输入"+extName+"格式的文件"
     alert("*对不起，您只能输入"+extName+"格式的图片");
     return;
       }
     
        //当没选中图片时，清除预览
        if(this.files.length === 0){
            document.querySelector('#preview').src = '';
            return;
        }
       
        //实例化一个FileReader
        var reader = new FileReader();

        reader.onload = function (e) {
            //当reader加载时，把图片的内容赋值给
            document.querySelector('#preview').src = e.target.result;
        };

    //读取选中的图片，并转换成dataURL格式
    reader.readAsDataURL(this.files[0]);
    }, false);
</script>