网站首页 > 技术文章 正文
我们常用的文件上传类型呢一般就是图片,如何限制前端只能上传图片,有几种方法仅供参考。
1、用文件的类型来判断
// 获取文件输入框元素
const inputElement = document.getElementById("file-input");
// 监听文件选择事件
inputElement.addEventListener("change", (event) => {
// 获取用户选择的文件
const file = event.target.files[0];
// 判断文件类型是否为图片
if (file.type.startsWith("image/")) {
console.log("用户选择了图片文件");
} else {
console.log("用户选择了非图片文件");
}
});
2、用文件的后缀名来判断
// 获取文件输入框元素
const inputElement = document.getElementById("file-input");
// 监听文件选择事件
inputElement.addEventListener("change", (event) => {
// 获取用户选择的文件
const file = event.target.files[0];
// 获取文件名后缀
const fileName = file.name;
const fileExtension = fileName.split(".").pop().toLowerCase();
// 判断文件类型是否为图片
if (fileExtension === "jpg" || fileExtension === "jpeg" || fileExtension === "png" || fileExtension === "gif") {
console.log("用户选择了图片文件");
} else {
console.log("用户选择了非图片文件");
}
});
3、通过文件编码来判断
// 获取文件输入框元素
const inputElement = document.getElementById("file-input");
// 监听文件选择事件
inputElement.addEventListener("change", (event) => {
// 获取用户选择的文件
const file = event.target.files[0];
// 读取文件的前几个字节
const reader = new FileReader();
reader.onload = function(e) {
const bytes = new Uint8Array(e.target.result);
// 判断文件类型
if (bytes[0] === 0xFF && bytes[1] === 0xD8 && bytes[2] === 0xFF) {
console.log("用户选择了JPEG文件");
} else if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4E && bytes[3] === 0x47) {
console.log("用户选择了PNG文件");
} else if (bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x38) {
console.log("用户选择了GIF文件");
} else {
console.log("用户选择了未知类型的文件");
}
};
reader.readAsArrayBuffer(file.slice(0, 4));
});
- 上一篇: LayUI+asp.net图片上传详解
- 下一篇: Fabric.js 将本地图像上传到画布背景
猜你喜欢
- 2024-11-25 超强 Vue+Electron 图床上传工具PicGo
- 2024-11-25 JAVA全栈CMS系统vue图片/视频上传组件,多图上传及删除功能11
- 2024-11-25 SpringCloud+vue实现图片裁剪缩放上传
- 2024-11-25 Node.js实现将文字与图片合成技巧
- 2024-11-25 Nodejs之MEAN栈开发(四)-- form验证及图片上传
- 2024-11-25 基于业务场景下的图片/文件上传方案总结
- 2024-11-25 几行代码实现上传接口,白嫖Github做为在线图床
- 2024-11-25 我带的实习生竟然把图片直接存到了服务器上!崩溃了
- 2024-11-25 Fabric.js 将本地图像上传到画布背景
- 2024-11-25 LayUI+asp.net图片上传详解
你 发表评论:
欢迎- 599℃几个Oracle空值处理函数 oracle处理null值的函数
- 591℃Oracle分析函数之Lag和Lead()使用
- 579℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 575℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 571℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 564℃【数据统计分析】详解Oracle分组函数之CUBE
- 550℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 545℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)