原生Js对文件类型的判断,判断文件是图片,视频等格式

时间: 2018-01-05阅读: 6968标签: 图片

在我们开发中,会遇到这样的场景:

1.服务器返回json数据,根据数据类型来显示是图片还是视频。
2.前端上传文件,需要指定文件类型才能上传到服务器。

这时候就需要使用js来判断对应文件的类型了,我们常用的判断是通过后缀来实现的。


html结构如下:

<input type="file" id="file" onchange="test()"/>


方案一:

步骤1:通过ID获取文件名的后缀:

function getSuffix(id){
	var dom=document.getElementById(id).value;//根据id得到值
	var index=dom.lastIndexOf(".")//得到最后一个"."在第几位
	return dom.substring(index).toLowerCase(); //截断"."之前的,得到后缀[忽略大写]
}

步骤2:判断文件是图片格式:

function test(){
	var suffix=getSuffix('file');
	if(suffix!=".bmp"&&suffix!=".png"&&suffix!=".gif"&&suffix!=".jpg"&&suffix!=".jpeg"){  //根据后缀,判断是否符合图片格式
        console.log("不是指定图片格式,重新选择"); 
        return false;
   }
}


方案二:

除了上面方法,我们还可以结合正则来判断如下:

function test(){
	var ImgType=["gif", "jpeg", "jpg", "bmp", "png"];//图片
	var dom=document.getElementById('file').value;//根据id得到值
	if(!RegExp("\.(" + ImgType.join("|") + ")$", "i").test(dom.toLowerCase())){
		console.log("不是指定图片格式,重新选择"); 
		return false;
	}
}





站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/325

vue引入图片

通过在vue文件引入scss样式文件;如果scss文件有引入背景图片,这里不能使用相对路径了,需要使用~开头的方式,如果 URL 以 ~ 开头,其后的任何内容都会作为一个模块请求被解析。

图片压缩工具推荐

为什么要压缩图片?如果你是web开发者:减小网页、小程序的体积,提升加载速度。如果你是App开发者:减小App的打包体积,提升下载速度。如果你是新媒体从业者:文章体积更小,加快打开速度。如果你是职场用户:邮件附件超限、微信发送太慢,你总会遇到

Js淘宝放大镜实现

这个功能是我在模仿淘宝详情页的时候做出来的;图片的引用是一个大图,一个小图;传输用的ajax,记得改成自己的ip地址,js和html都改一下。制作一个类似于淘宝的放大镜效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

HTML图像标签img和源属性src及Alt属性、宽高、对齐

使用<img>标签定义 HTML 页面中的图像,图像标签<img>有两个必需的属性:源属性src和alt,<img>是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)

在 Chrome 75中将支持图片懒加载

Google 的 Chrome & Web 平台工程经理 Addy Osmani 在个人博客发文,介绍到 <img> 和 <iframe> 的 loading 将新增一个属性:lazy。为延迟加载提取和应用JavaScript库的重要性(对于跨浏览器支持)

html2canvas保存图片模糊问题解决

使用官网的CDN,网上可以查到很多解决方案,常用的主要就是:canvas先放大,其次加个dpi效果也可以,代码如下:

Js怎么给图片打马赛克?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

HTML5 实现图片预览和查看原图

html5从一开始就给开发者很多的期待,提供众多新的API,不用再想以前一样,为了实现某个功能写很多的代码。在以前,如果要实现图片预览会怎么做呢,因为为了安全的原因,web端的js是不能读取文件的本地真实路径的

nodejs实现二维码生成及图片合成

前端需要做分享功能。生成二维码后 在指定的图片上添加二维码和邀请码生成新的图片。1.使用 qr-code生成二维码;2.使用 text-to-svg 生成邀请码图片,字符转图片;3.使用gm工具合成图片

css怎么让背景图片铺满?

css让图片铺满的方法:可以使用background-size:cover样式设置背景图片铺满。background-size属性规定背景图像的尺寸。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广