前言

在Web项目开发过程中，文件上传功能几乎必不可少的，很多时候，我们在进行文件上传时，尤其是向普通用户开放文件上传功能时，一般都需要对上传文件的格式进行一些限制，以防止不良用户、黑客等将带有病毒脚本文件上传到服务器中，常见文件格式限制如下。

1、通过input标签的accept属性进行限制

我们可以通过HTML5中的 input file 标签的accept属性，根据自己的需求，在选择上传文件的时候，指定可见的文件类型格式（默认任意类型）来进行限制。

实例代码：


<input type="file" id="oFile" name="myFiles" accept=".doc, .docx, .xls, .txt" onchange="upFile(event)" />

2、通过JS获取上传文件的file.type 或 file.name属性进行限制

在JS中，可以在上传事件中，通过file对象获取到上传文件的相关属性。

实例代码：


function upFile(event) {const [ file ] = event.target.files || event.dataTransfer.files || this.file.files;console.dir(file); // 文件对象console.log(file.name); // 文件名称  console.log(file.type); // 文件类型console.log(file.size); // 文件大小// 对文件类型做简单限制：如：只允许上传 jpg  png gif 这3种格式if(!file.type && /\.(?:jpg|png|gif)$/.test(file.name)) ){ alert('对不起：上传的图片格式只能是：jpg, png, gif 格式！'); return false; }
}

以上两种方式是我们最常见的文件上传类型限制方法，但是，如果单纯的以文件后缀名(扩展名)、文件类型进行截取的方式来进行限制，是非常容易遭到破解的，比如，用户要将文件的后缀名(扩展名)，重命为你指定的可上传的文件类型，就绕过了你的限制，便可以完成上传。

此时：我们根据文件的头信息，来判断文件真正的格式。

3、通过JS的FileReader方法获取上传文件的头信息进行限制

在JS中通过读取文件的十六进制的头信息，来进行限制，因为相同类型文件的文件头信息是相同的，即使用户修改了文件的后缀名(扩展名)，但文件的头信息是不会改变的。

实例代码：

// 读取文件的二进制数据并将其转换为十六进制
function fileReader (blob) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsBinaryString(blob);reader.onload = (ret) => {const res = reader.result.split('').map((o) => o.charCodeAt().toString(16).padStart(2, '0'));resolve(res.join(' ').toUpperCase());},reader.onerror = (err) => {reject(err);};});
};// png格式
async function isPng(file) {return (await fileReader(file.slice(0, 8))) == "89 50 4E 47 0D 0A 1A 0A";
};// jpg格式
async function isJpg(file) {const start = await fileReader(file.slice(0, 2));const end = await fileReader(file.slice(-2, file.size));return "FF D8" == start && "FF D9" == end;
};// gif格式
async function isGif(file) {const ret = await fileReader(file.slice(0, 6));return "47 49 46 38 39 61" == ret || "47 49 46 38 37 61" == ret;
};async function upFile(event) {const [ file ] = event.target.files || event.dataTransfer.files || this.file.files;console.dir(file); // 文件对象console.log(file.name); // 文件名称  console.log(file.type); // 文件类型console.log(file.size); // 文件大小// 根据文件头信息进行判断限制：如：只允许上传 png 这种格式if(!await isPng(file)){ alert('对不起：上传的图片格式只能是：png格式！'); return false; }
}

4、通过第三方的file-type工具包来进行限制

file-type工具包也是用Js来进行封装的，其原理和上面的第3种方式一样，它支持的文件类型有几十种，几乎能满足我们的日常开发需求。

Npm地址：https://www.npmjs.com/package/file-type

Web前端 Js文件上传类型限制(根据文件头信息判断)相关推荐

Web网络攻防文件上传。.
Web网络攻防文件上传上传漏洞靶场upload-labs安装 upload-labs 是由php 语言靶场,因此需要在PhpStudy下进行使用. 靶场文件下载:https://github.com ...
js文件上传，java后台接收
js文件上传,java后台接收 js文件上传,java后台如何接收前端写法如下 <!DOCTYPE html> <html><head><meta char ...
JS - 文件上传组件WebUploader使用详解1（带进度的文件上传
一.基本介绍 1,什么是 WebUploader? WebUploader 是由百度公司团队开发的一个以 HTML5 为主,FLASH 为辅的现代文件上传组件. 官网地址:http://fex.bai ...
fileinput.js php,JS文件上传神器bootstrap fileinput的解析
这篇文章主要介绍了JS文件上传神器Bootstrap FileInput,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,具有一定的参考价值,感兴趣的小伙伴们可以 ...
html file验证文件是否上传,JavaScript判断文件上传类型的方法
本文实例展示了JavaScript判断文件上传类型的方法,是一个非常常用的技巧.具体实现方法如下: 文件上传时用到一个功能,使用html元素的input标签实现: 选中图片后立即触发onchange事 ...
html页面点击按钮上传文件,点击按钮实现文件上传及控制文件上传类型
1.原生js实现文件上传 html部分: 上传文件 js部分: upload(event) { //代替执行上传功能 let it = event.target; $(it).next().click ...
web渗透之文件上传漏洞知识总结
一.文件上传漏洞思路: 第一步: 首先看中间件:因为第一步看中间件就是确定是否存在解析漏洞(学习整理几种解析漏洞的对应版本,有些低版本有解析漏洞,有些高版本就没有.)中间件版本确定了,解析漏洞就确定了 ...
前端大文件上传和下载（分片上传）
前端大文件上传和下载(分片上传) 一.问题日常业务中难免出现前端需要向后端传输大型文件的情况,这时单次的请求不能满足传输大文件的需求,就需要用到分片上传业务需求为:用户可以上传小于20G的镜像文件 ...
Codeigniter文件上传类型不匹配错误
Codeigniter的文件上传类方便了我们使用PHP来处理文件上传的操作,使用起来非常简单,如下: $config['upload_path'] = './uploads/'; $config['a ...
想说爱你不容易 | 使用最小 WEB API 实现文件上传（Swagger 支持）
前言上回,我们使用最小 WEB API 实现文件上传功能(<想说爱你不容易 | 使用最小 WEB API 实现文件上传>),虽然客户端访问是正常的,但是当打开 Swagger 页面时,发 ...

Web前端 Js文件上传类型限制(根据文件头信息判断)

前言

1、通过input标签的accept属性进行限制

2、通过JS获取上传文件的file.type 或 file.name属性进行限制

3、通过JS的FileReader方法获取上传文件的头信息进行限制

4、通过第三方的file-type工具包来进行限制

Web前端 Js文件上传类型限制(根据文件头信息判断)相关推荐

最新文章

热门文章