关闭

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

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

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

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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

关闭

CSS object-fit 对图片的处理

object-fit:指定可替换元素的内容应如何适应到需使用的高度和宽度确定的框,平时写代码经常会在代码中插入图片,你是否会多少感觉插入的图片被拉伸或是被缩放

webpack 图片路径问题

今天在学 webpack 时碰到一个问题,就是 webpack 通过插件 file-loader 打包图片后,在最终的 html 文件中图片地址是不对的,只有图片名称是对的,相信应该也有很多和我一样的初学者掉坑了。在 webpack.config.js 的配置文件中添加一个属性

vue引入图片

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

前端Js图片压缩

实现思路:获取input的file;使用fileReader() 将图片转为base64;使用canvas读取base64 并降低分辨率;把canvas数据转成blob对象;把blob对象转file对象;完成压缩

css怎么让背景图片铺满?

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

浅探前端图片优化

性能优化是前端开发必不可少的一环,而图片优化又是性能优化中必不可少的一环,但不知道有多少开发者在网页的开发过程中会注意图片的使用,图片使用不当可能会导致网页加载卡顿、网页加载速度慢等问题,这篇文章将会将我以往对图片的处理做个总结

js实现图片转base64格式,并压缩上传

需要用户上传身份证,并识别身份证的编号存储在后端,这里要求实现图片上传,并转为base64的格式,传给服务器失败图片的身份证号码。由于很多用户用手机拍摄的照片

Js淘宝放大镜实现

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

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

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

根据图片url链接判断图片大小

背景:产品需求,input框输入图片链接,点击检测按钮的时候需要判断该图片不超过2M

点击更多...

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