JS原生文件图片上传
2021-10-27 本文已影响0人
coderhzc
1.js原生图片上传 获取到文件的地址
<!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>
<label for="file">上传图片格式验证</label>
<input type="file" id="file">
<script>
// jpg png gif jpeg
window.onload = function () {
// 1.获取标签
let file = document.getElementById('file');
// 2.监听图片选择的变化
file.onchange = function () {
// console.log("监听事件");
// 3.获取到上传的图片路径
var path = this.value
console.log(path); // C:\fakepath\zhifengandyingge.jpg
// 4. 获取 . 在路径字符串站的位置
let loc = path.lastIndexOf('.')
// 5. 截取文件路径的名称
let suffix = path.substr(loc);
// 6.统一转小写
let lower_suffix = suffix.toLowerCase();
// 7. 判断
if (lower_suffix === ".jpg" || lower_suffix === ".png" || lower_suffix === '.jpeg' || lower_suffix === ".gif") {
alert("上传图片格式正确")
} else {
alert("上传图片格式错误")
}
}
}
</script>
</body>
</html>
实际截图:
image.png
错误时的提示
image.png
正确时的提示
image.png
