图片预览，格式确认

<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>