JS校验上传图片类型

常见图像文件类型

缩写	文件格式	MIME类型	文件拓展名	浏览器兼容性
APNG	Animated Portable Network Graphics动态便携式网络图像	image/apng	.apng	Chrome, Edge, Firefox, Opera, Safari
AVIF	AV1 Image File FormatAV1 图像文件格式	image/avif	.avif	Chrome, Opera, Firefox (feature flag)
BMP	Bitmap file 位图文件	image/bmp	.bmp	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
GIF	Graphics Interchange Format 图像互换格式	image/gif	.gif	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
ICO	Microsoft Icon 微软图标	image/x-icon	.ico, .cur	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
JPEG	Joint Photographic Expert Group image 联合影像专家小组图像	image/jpeg	.jpg, .jpeg, .jfif, .pjpeg, .pjp	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
PNG	Portable Network Graphics 便携式网络图像	image/png	.png	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
SVG	Scalable Vector Graphics 可缩放矢量图形	image/svg+xml	.svg	Chrome, Edge, Firefox, Internet Explorer, Opera, Safari
TIFF	Tagged Image File Format 标签图像文件格式	image/tiff	.tif, .tiff	Safari
WebP	Web Picture format 万维网图像格式	image/webp	.webp	Chrome, Edge, Firefox, Opera, Safari

校验上传图片类型

file.type校验类型

beforeUpload(file) {const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";if (!isJpgOrPng) {this.$message.error('图片仅支持jpg/png格式，请重新上传!');// 支持.jpg, .jpeg, .jfif, .pjpeg, .pjp .png参考上表return false;}// ...
}

file.name结尾校验类型

beforeUpload(file) {const limitFileType = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();if (limitFileType !== "png" && limitFileType !== "jpg") {this.$message.error('图片仅支持jpg/png格式，请重新上传!');// 支持.jpg, .pngreturn false;}// ...
}

参考

图像文件类型与格式指南

JS校验上传图片类型相关推荐

js实现上传图片类型+大小+尺寸验证
图片类型+大小+尺寸验证 html代码: <input type="file" name="files" id="file" onch ...
【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）
文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...
js在上传图片前判断大小
js在上传图片前判断大小这个可以用javascript实现,效果还可以,主要是因为javascript里居然有Image对象,可以取得其属性 <script language=javascri ...
基于asp.net + easyui框架，js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载...
2019独角兽企业重金招聘Python工程师标准>>> 最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多.在上传图片之前验证图片的格式,并同时实现预 ...
js校验复选框（多选按钮）是否被选中的方法
js校验复选框是否被选中的方法方法一:(使用下标进行标记) if ($("#checkbox-id")get(0).checked) {// do something } 方法二 ...
扩展typeof来判断js变量的类型
Javascript 的 typeof可以获取变量的类型,有如下6种返回值: 1)number: 2)string: 3)boolean: 4)object 5)function: 6)u ...
JS nodeType返回类型
JS nodeType返回类型前几天朋友正好问道这个 js的nodeType是个什么概念(做浏览器底层的)正好遇到这篇文章可以向大家解释下将HTML DOM中几个容易常用的属性做下记录: nod ...
java创建node类型数据类型_[Java教程]js DOM Node类型
[Java教程]js DOM Node类型 0 2015-12-18 16:00:08 DOM(文档对象模型)是针对HTML和 DOM可以将任何HTML或以下面为例: My article Hell ...
php上传图片大小判断,jQuery实现判断上传图片类型和大小的方法示例
本文实例讲述了jQuery实现判断上传图片类型和大小的方法.分享给大家供大家参考,具体如下: 这里使用jQuery判断上传图片的类型和大小: 图片格式为: 图片大小为: $(function(){ v ...
浅谈 js 数字格式类型
原文:浅谈 js 数字格式类型很多人也许只知道 123,123.456,0xff 之类的数字格式. 其实 js 格式还有很多数字格式类型,比如 1., .1 这样的,也有 .1e2 这样的. 可能有 ...

JS校验上传图片类型

常见图像文件类型

校验上传图片类型

参考

JS校验上传图片类型相关推荐

最新文章

热门文章