图片预览,格式确认
<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>