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

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

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

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;
	}
}





css实现图片自适应容器的几种方式

css实现图片自适应容器:经常有这样一个场景,需要让图片自适应容器的大小。img标签的方式:我们马上就能想到,把width、height 设置为100%啊。来看一哈效果。

jpg、gif、png、svg、bmp、WebP图像格式的区别以及应用场景

jpg:非常适合作为储存像素色彩丰富的图片、例如照片等等,png:分为 png-8 以及 png-24 两种格式,gif:非常适合用来表现图标、 UI接口、线条插画、文字等部分的输出,也可用来展示小的动画。

图片压缩工具推荐

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

使用 form 和 iframe 实现图片上传回显

主要利用 form 的 target 属性,在提交表单之后 response 返回到 iframe 中。form 的 action 可以自己写,也可以直接利用 富文本编辑器的接口实现上传

img图片不存在显示默认图

在项目中,我们使用img标签加载图片,有时候图片地址有可能失效,获取路径问题,导致图片加载失败,img标签就会显示alt内容。这时候用户体验不是很好,所以就需要显示一张默认图片

Js淘宝放大镜实现

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

html5图片上传使用FileReader预览

通过FileReader,和es6的方法解构赋值,promise对象简单封装上传预览,具体逻辑:选中图片之后,触发onchange方法,获得上传文件对象,调用fileReader方法验证图片是否符合上传需求,符合返回图片文本,不符合返回错误信息。

谈谈 Web 图片浏览体验与优化

图片,在一张网页上起到了相当大的作用。一个充满艺术的网站,它们的排版往往十分简洁、大方,整张网页的美感全体现在了一张背景图和产品图=== 而在浏览这样的网页时,其响应速度决定了用户体验。如果你正在打开一个自己比较感兴趣的网站

浅探前端图片优化

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

网页上常用的图片格式及使用场景

jpg:有损压缩格式,靠损失图片本身的质量来减小图片的体积,gif:无损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,png:无损压缩格式,适用于颜色数量较少的图像;svg:可缩放矢量图形

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

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

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录