图片上传并展示.png
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file">
<img src="" alt="">
<script src="./index.js"></script>
</body>
</html>
js
let ine = document.querySelector('input');
ine.onchange = function(){
let file = this.files[0];
console.log("file===",file)
//lastIndexOf() 返回指定字符在此字符串中最后一次出现处的索引
//substring(from,to) 截取字符串 后一个参数可省略(包括开始字符)
let filename = (file.name.substring(file.name.lastIndexOf('.'))).toLocaleLowerCase()
// console.log("filename===",filename);
let arr = ['.png','.jpg','.gif','.icon'];
let flag = false;
//判断是否是限定的文件类型
for(let i = 0; i < arr.length; i++) {
if(arr[i] == filename){
flag = true;
break;
}
}
if(flag){
//创建文件读取器
let reader = new FileReader();
console.log(reader)
//开始读取文件,将文件转化为DataURl
reader.readAsDataURL(file);
///文件读取成功时的触发方法
reader.onload = function(){
//this.result base64格式的
console.log(this.result)
document.querySelector('img').src = this.result;
}
}else{
alert('文件格式不正正确')
}
}
网友评论