网站首页 > 技术文章 正文
在 JavaScript 中,可以通过 input 标签和 FileReader API 来实现上传文件并判断文件类型的功能。以下是一个简单的示例: HTML 代码:
htmlCopy code
<input type="file" id="fileInput" onchange="checkFileType()">JavaScript 代码:
javascriptCopy code
function checkFileType() {
  // 获取文件输入框元素
  var fileInput = document.getElementById("fileInput");
  // 获取文件对象
  var file = fileInput.files[0];
  // 创建 FileReader 对象
  var reader = new FileReader();
  // 读取文件
  reader.readAsArrayBuffer(file);
  // 文件读取完成时触发
  reader.onloadend = function() {
    // 获取文件的类型
    var type = getFileType(new Uint8Array(reader.result));
    // 判断文件类型
    if (type === "pdf") {
      console.log("文件类型为 PDF");
    } else if (type === "jpg" || type === "jpeg") {
      console.log("文件类型为 JPG/JPEG");
    } else if (type === "png") {
      console.log("文件类型为 PNG");
    } else {
      console.log("文件类型不支持");
    }
  };
}
function getFileType(bytes) {
  // 根据文件头判断文件类型
  if (bytes[0] === 0x25 && bytes[1] === 0x50 && bytes[2] === 0x44 && bytes[3] === 0x46) {
    return "pdf";
  } else if (bytes[0] === 0xff && bytes[1] === 0xd8) {
    return "jpg";
  } else if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47) {
    return "png";
  } else {
    return "unknown";
  }
}以上代码中,checkFileType 函数用于获取文件对象并读取文件内容,通过调用 getFileType 函数判断文件类型,并根据文件类型进行相应的处理。getFileType 函数根据文件头信息判断文件类型,目前支持判断 PDF、JPG/JPEG 和 PNG 文件类型。需要注意的是,这种方式只能判断文件类型是否符合要求,但并不能保证文件内容的安全性,还需要进行其他安全性检查。
猜你喜欢
- 2024-10-10 让编辑器支持word的复制黏贴,支持截屏的黏贴
- 2024-10-10 大文件上传优化(切片、断点续传、秒传)
- 2024-10-10 你知道前端对图片的处理方式吗(前端实现图片编辑)
- 2024-10-10 JavaScript异步图像上传(javascript 异步操作)
- 2024-10-10 javascript对文件和进制操作的一些方法汇总
- 2024-10-10 Node + H5 实现大文件分片上传、断点续传
- 2024-10-10 input上传图片并压缩(vue,前端,js)
- 2024-10-10 leaflet地图截图批量导出(leaflet地图旋转)
- 2024-10-10 Spring WebSocket传递多媒体消息(websocket springmvc)
- 2024-10-10 Web worker 技术应用与实践(web技术应用基础)
- 最近发表
- 
- 聊一下 gRPC 的 C++ 异步编程_grpc 异步流模式
- [原创首发]安全日志管理中心实战(3)——开源NIDS之suricata部署
- 超详细手把手搭建在ubuntu系统的FFmpeg环境
- Nginx运维之路(Docker多段构建新版本并增加第三方模
- 92.1K小星星,一款开源免费的远程桌面,让你告别付费远程控制!
- Go 人脸识别教程_piwigo人脸识别
- 安卓手机安装Termux——搭建移动服务器
- ubuntu 安装开发环境(c/c++ 15)_ubuntu安装c++编译器
- Rust开发环境搭建指南:从安装到镜像配置的零坑实践
- Windows系统安装VirtualBox构造本地Linux开发环境
 
- 标签列表
- 
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- mysqlany_value (79)
- static函数和普通函数 (84)
- el-date-picker开始日期早于结束日期 (76)
- js判断是否是json字符串 (75)
- c语言min函数头文件 (77)
- asynccallback (87)
- localstorage.removeitem (77)
- vector线程安全吗 (73)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 无效的列索引 (74)
 
